Error map
Invalid hook call (duplicate React in Next.js) Next.js: Error: Invalid hook call. Hooks can only be called inside of the body of a function component — Cannot read properties of null (reading 'useContext')
Next.js · 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)
npm ERR! code ERESOLVE — unable to resolve dependency tree
npm 7+ found conflicting peer dependency requirements and refuses to install a broken tree.
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.
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.
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: useLayoutEffect does nothing on the server
A component using useLayoutEffect was server-rendered, where layout effects can’t run.
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.
Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx"
The same URL is defined in both the `app` and `pages` directories.
Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler)
A cross-origin request to your Next.js API route is blocked because the response lacks CORS headers.
TypeScript: error TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.
JSX compiled with `jsx: react` needs `React` imported, but the file doesn't import it.
Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build)
Node ran out of memory while building a large Next.js app (or on a small CI/Vercel runner).
Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 }
During `next build` a page tried to fetch data from a server (often your own app or an API) that isn't running yet.
npm: ERESOLVE unable to resolve dependency tree — Found: react@19.0.0 / Could not resolve dependency: peer react@"^18.2.0" from some-lib
A package requires a React version different from the one installed with Next.js.
Two steps away (33)
npm ERR! code EACCES — permission denied
npm can’t write to a directory — usually global installs into a root-owned folder.
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.
npm ERR! code E404 — 404 Not Found: package@version is not in this registry
npm asked the registry for a package (or version) that doesn’t exist there — a typo, a private/scoped package without auth, or th…
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.
Error: Hydration failed because the initial UI does not match what was rendered on the server
The HTML rendered on the server differs from the first client render, so React (Next.js/Remix) can’t attach to it.
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.
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: Actions must be plain objects. Instead, the actual type was: 'function'.
A function (thunk) was dispatched but the thunk middleware isn’t configured.
AbortError: The user aborted a request. / signal is aborted without reason
A fetch was cancelled through an AbortController (or the browser cancelled it).
TypeError: Failed to execute 'json' on 'Response': body stream already read
A fetch Response body was consumed twice (e.g. calling .text() then .json()).
RuntimeError: Event loop is closed
Async code tried to use an event loop that has already been shut down.
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.
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.
Next.js: ReferenceError: document is not defined
Code used the DOM (`document`) while rendering on the server.
Next.js: Failed to compile. ./src/app/page.tsx 12:7 Error: 'x' is assigned a value but never used. @typescript-eslint/no-unused-vars
`next build` runs ESLint and fails the build on lint errors.
ESLint: error Component name "Home" should always be multi-word vue/multi-word-component-names
ESLint's Vue rules require component names with at least two words to avoid clashing with HTML elements.
ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured)
ESLint can't parse `.vue` files because the Vue parser isn't configured.
TypeError: Missing parameter name at 1 (path-to-regexp)
An Express 5 (path-to-regexp v8) route uses old wildcard syntax like '*' or '/:id?'.
No routes matched location "/x"
React Router found no route definition for the current URL.
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.
Browser: Access to XMLHttpRequest at 'https://api.example.com' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header — Laravel
The browser blocked a cross-origin call to your Laravel API because the response lacks the right CORS headers.
Next.js: Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p> / In HTML, <p> cannot be a descendant of <p>. This will cause a hydration error
The rendered HTML has an invalid element nesting, so the browser "fixes" it and React's hydration no longer matches.
Next.js: You're importing a component that needs createContext. It only works in a Client Component but none of its parents are marked with "use client"
A context provider (or a lib that uses `createContext`) is used in a Server 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: Nothing was returned from render. This usually means a return statement is missing.
A component returned undefined (React 17 and earlier) — usually a missing return or a return followed by a line break.
ReferenceError: React is not defined / 'React' must be in scope when using JSX
JSX was compiled with the classic runtime, which needs React imported in every file.
npm ERR! code ELIFECYCLE / Command failed with exit code 1
An npm script (build, start, test, postinstall) exited with an error. ELIFECYCLE is only the wrapper — the real error is printed…
gyp ERR! build error / node-gyp rebuild failed
A dependency with native C/C++ code couldn’t compile — missing build tools, Python, or an unsupported Node version.
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
The V8 heap hit its limit — a large build (webpack, tsc, Next.js) needs more memory, or the app leaks.
Error: error:0308010C:digital envelope routines::unsupported
An old build tool (webpack 4, old react-scripts) uses a hash algorithm that OpenSSL 3 in Node 17+ disables.
Error: @prisma/client did not initialize yet. Please run "prisma generate"
The generated Prisma Client is missing or out of date.
Error: Node Sass does not yet support your current environment
node-sass (deprecated) has no binary for your Node version/OS.
TypeScript: error TS2604: JSX element type 'Foo' does not have any construct or call signatures.
You used something as a JSX component that TypeScript doesn't see as a component (not a function/class returning JSX).
Map another error
Popular: 500403400ORA-009331064Critical errorFileNotFoundException assemblyTypeError