Error map

You are attempting to export "metadata" from a component marked with "use client" Next.js: You are attempting to export "metadata" from a component marked with "use client", which is disallowed

Next.js · layer 1, On your device

Open the full error page →

Centre: this error. First ring: errors it is linked with (7). 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.

1 · On your device 4 · Application & API 7 · Build & delivery
You are attempting to export "metadata" from a component marked with "use client" — Next.js: You are attempting to export "metadata" from a component marked with "use client", which is disallowed (Next.js)You are att…server-only — Next.js: You're importing a component that needs "server-only". That only works in a Server Component (Next.js)server-onlyneeds useState — 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" (React)needs useStatecreateContext only works in Client Components — 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" (Next.js)createContext only …next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScr…next build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch f…No HTTP methods exported in route.ts — Next.js: Error: No HTTP methods exported in '/app/api/users/route.ts'. Export a named export for each HTTP method (GET, POST...) (Next.js)No HTTP methods exp…You have a Server Component that imports next/router. Use next/navigation instead — Next.js: You have a Server Component that imports next/router. Use next/navigation instead (Next.js)You have a Server C…Can't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'Functions cannot be passed — Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". (React)Functions cannot be…async Client Component — Error: async/await is not yet supported in Client Components, only Server Components. (React)async Client Compon…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedDynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usagenext/image hostname — Error: Invalid src prop on `next/image`, hostname "x" is not configured under images in your `next.config.js` (React)next/image hostnameuseNavigate outside Router — Error: useNavigate() may be used only in the context of a <Router> component. (React)useNavigate outside…useContext undefined — TypeError: Cannot destructure property 'user' of 'useContext(...)' as it is undefined. (React)useContext undefinedNo QueryClient set — Error: No QueryClient set, use QueryClientProvider to set one (React)No QueryClient setELIFECYCLE — npm ERR! code ELIFECYCLE / Command failed with exit code 1 (npm)ELIFECYCLEgyp ERR! — gyp ERR! build error / node-gyp rebuild failed (npm)gyp ERR!heap out of memory — FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (Node.js)heap out of memoryERR_OSSL_EVP_UNSUPPORTED — Error: error:0308010C:digital envelope routines::unsupported (Node.js)ERR_OSSL_EVP_UNSUPP…prisma generate — Error: @prisma/client did not initialize yet. Please run "prisma generate" (Node.js)prisma generatenode-sass — Error: Node Sass does not yet support your current environment (Node.js)node-sassConflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and…CORS error calling Next.js API route / route handler — 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) (Next.js)CORS error calling …NextRouter was not mounted — Error: NextRouter was not mounted. (React)NextRouter was not …Failed prop type: The prop href expects a string or object in <Link> — Next.js: Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead (Next.js)Failed prop type: T…Invalid <Link> with <a> child. Please remove <a> — Next.js 13+: Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior> (Next.js)Invalid <Link> with…

Directly related (7)

server-onlyNext.js

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…

needs useStateReact

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.

createContext only works in Client ComponentsNext.js

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.

next build: JavaScript heap out of memoryNext.js

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 build: fetch failed ECONNREFUSED (build-time API)Next.js

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.

No HTTP methods exported in route.tsNext.js

Next.js: Error: No HTTP methods exported in '/app/api/users/route.ts'. Export a named export for each HTTP method (GET, POST...)

A Route Handler file exports no recognised HTTP method function.

You have a Server Component that imports next/router. Use next/navigation insteadNext.js

Next.js: You have a Server Component that imports next/router. Use next/navigation instead

`next/router` (Pages Router) was imported in an App Router component.

Two steps away (20)

Can't resolve 'fs'React

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.

Functions cannot be passedReact

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.

async Client ComponentReact

Error: async/await is not yet supported in Client Components, only Server Components.

A component marked "use client" was declared async.

Hydration failedReact

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.

Dynamic server usageReact

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).

next/image hostnameReact

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.

useNavigate outside RouterReact

Error: useNavigate() may be used only in the context of a <Router> component.

A React Router hook ran in a component that isn’t rendered inside a Router provider.

useContext undefinedReact

TypeError: Cannot destructure property 'user' of 'useContext(...)' as it is undefined.

A component read a context with no matching Provider above it.

No QueryClient setReact

Error: No QueryClient set, use QueryClientProvider to set one

TanStack Query hooks ran outside a QueryClientProvider (or a duplicate copy of the library is installed).

ELIFECYCLEnpm

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!npm

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.

heap out of memoryNode.js

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.

ERR_OSSL_EVP_UNSUPPORTEDNode.js

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.

prisma generateNode.js

Error: @prisma/client did not initialize yet. Please run "prisma generate"

The generated Prisma Client is missing or out of date.

node-sassNode.js

Error: Node Sass does not yet support your current environment

node-sass (deprecated) has no binary for your Node version/OS.

Conflicting app and page file was foundNext.js

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.

CORS error calling Next.js API route / route handlerNext.js

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.

NextRouter was not mountedReact

Error: NextRouter was not mounted.

next/router’s useRouter was used inside the App Router (app/ directory), which uses next/navigation instead.

Failed prop type: The prop href expects a string or object in <Link>Next.js

Next.js: Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead

`` received `undefined` (or another invalid value), so Next.js can't build the link.

Invalid <Link> with <a> child. Please remove <a>Next.js

Next.js 13+: Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>

Since Next.js 13 `` renders its own ``, so nesting your own `` is invalid.

Map another error

Popular: 500403400ORA-009331064Critical errorFileNotFoundException assemblyTypeError