Error map
ERESOLVE: next requires react ^18 (peer dependency conflict) npm: ERESOLVE unable to resolve dependency tree — Found: react@19.0.0 / Could not resolve dependency: peer react@"^18.2.0" from some-lib
Next.js · layer 1, On your device
Centre: this error. First ring: errors it is linked with (9). 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 (9)
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.
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.
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.
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')
Two copies of React are loaded (or React/ReactDOM versions differ), so hooks can't find the active renderer.
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.
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).
Two steps away (27)
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.
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.
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.
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.
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.
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.
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.
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render.
A function (usually a component itself) was rendered instead of calling/rendering it as an element.
Warning: Invalid DOM property `class`. Did you mean `className`?
HTML attribute names were used in JSX instead of their React/DOM property names.
Warning: Received `true` for a non-boolean attribute `x`.
A boolean was passed to a DOM attribute that expects a string, or a custom prop leaked through to a DOM element.
Map another error
Popular: 500403400ORA-009331064Critical errorFileNotFoundException assemblyTypeError