Error map
Hydration failed Error: Hydration failed because the initial UI does not match what was rendered on the server
React · layer 1, On your device
Centre: this error. First ring: errors it is linked with (12). Outer ring: what those are linked with. Colours show the layer of a request each error belongs to. Click any dot to re-centre the map on it; hover to follow its connections. The centre dot opens the error page.
Directly related (12)
ReferenceError: x is not defined
Code refers to a variable or function name that doesn’t exist in the current scope.
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
A Server Component passed a function prop to a Client Component.
Error: Objects are not valid as a React child
You tried to render a plain object (or a Promise/Date) directly in JSX; React can only render strings, numbers, elements and arra…
Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js`
next/image refuses to optimize images from domains not allowed in next.config.js.
Error: async/await is not yet supported in Client Components, only Server Components.
A component marked "use client" was declared async.
Error occurred prerendering page "/x". Read more: https://nextjs.org/docs/messages/prerender-error
A page threw an error while Next.js was rendering it at build time.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
A hook ran outside a function component/custom hook, conditionally — or two copies of React are loaded.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.
Error: Minified React error #31; visit https://react.dev/errors/31 for the full message
A production React build threw an error whose message was shortened to a number.
Module not found: Can't resolve 'fs' (Next.js / webpack 5)
A Node.js built-in (fs, path, crypto, net) is imported into code that runs in the browser bundle.
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client"
In the Next.js App Router, a component using hooks or browser APIs is rendered as a Server Component.
Warning: useLayoutEffect does nothing on the server
A component using useLayoutEffect was server-rendered, where layout effects can’t run.
Two steps away (27)
TypeError: Cannot read properties of undefined (reading 'x')
You tried to access a property on a value that is `undefined` (or `null`) — usually data that hasn’t loaded yet or a wrong proper…
TypeError: x is not a function
You called something as a function, but its value is not a function (it’s undefined, a string, an object…).
NameError: name 'x' is not defined
Python doesn’t know the name — it was never assigned/imported in this scope, or it’s misspelled.
Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies`
Next.js tried to statically render a route that reads request-specific data (cookies, headers, searchParams).
Error: NextRouter was not mounted.
next/router’s useRouter was used inside the App Router (app/ directory), which uses next/navigation instead.
Next.js: You're importing a component that needs "server-only". That only works in a Server Component
A Client Component (or a file it imports) pulls in server-only code — database clients, secrets, next/headers or a module marked…
Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
A state update runs during render, which triggers another render, which updates state again — forever.
Warning: Each child in a list should have a unique "key" prop
When rendering a list with `.map()`, each element needs a stable, unique `key` so React can track items between renders.
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined
JSX referenced a component that is undefined — almost always a default/named import mismatch.
Kubernetes: ImagePullBackOff / ErrImagePull
The node can’t pull the container image — wrong name/tag, missing registry credentials, or registry unreachable.
exec /usr/local/bin/docker-entrypoint.sh: exec format error
The container tried to run a binary built for a different CPU architecture (arm64 vs amd64) — or a script with a broken shebang /…
conflict: unable to remove repository reference (must force) - container is using its referenced image
You tried to delete an image that a container — even a stopped one — still uses.
'react-scripts' is not recognized as an internal or external command / react-scripts: command not found
node_modules is missing or broken, so the react-scripts binary isn’t available.
Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type
Webpack found syntax it can’t parse because no loader is configured for that file (JSX, TypeScript, CSS, or modern syntax in node…
Dockerfile parse error line N: unknown instruction
A line in the Dockerfile doesn’t start with a valid instruction — usually a broken line continuation or a typo.
npm ERR! code ERESOLVE — unable to resolve dependency tree
npm 7+ found conflicting peer dependency requirements and refuses to install a broken tree.
React Hook useEffect has a missing dependency (react-hooks/exhaustive-deps)
ESLint warns that the effect reads a value that isn’t in its dependency array, so it may use a stale value.
Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...)
An async function was passed directly to useEffect, so it returns a Promise instead of a cleanup function.
Warning: A component is changing an uncontrolled input to be controlled
An input’s `value` started as `undefined` (uncontrolled) and later became a defined value (controlled), or vice versa.
Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?
A component returns two sibling JSX elements without a single parent.
Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`)
A child component updated a parent’s state during its render instead of in an effect or event handler.
Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development.
An error happened in a script loaded from another origin, so the browser hid the details from React.
Warning: An update to Component inside a test was not wrapped in act(...)
A component updated state after the test’s synchronous assertions — async work wasn’t awaited.
Error: Cannot find module 'x' (MODULE_NOT_FOUND)
Node can’t resolve the module path — the package isn’t installed, or a relative path/extension is wrong.
ChunkLoadError: Loading chunk 123 failed.
A lazily loaded JavaScript chunk couldn’t be downloaded — usually because a new deployment removed the old hashed files.
Warning: Prop `className` did not match. Server: "x" Client: "y"
A prop rendered on the server differs from the client — usually CSS-in-JS class names or random IDs.
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
A component keeps updating itself in an effect or lifecycle — usually a useEffect that sets state its own dependencies change.
Map another error
Popular: 4035004000xC000007BTypeErrorCritical error404NullPointerException