Error map

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 · layer 1, On your device

Open the full error page →

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.

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…key is not a prop — Warning: `key` is not a prop. Trying to access it will result in `undefined` being returned. (React)key is not a propnon-boolean attribute — Warning: Received `true` for a non-boolean attribute `x`. (React)non-boolean attribu…needs 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 useStateConflicting 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 …TS2741: Property is missing in type but required in type — TypeScript: error TS2741: Property 'email' is missing in type '{ name: string; }' but required in type 'User'. (TypeScript)TS2741: Property is…[Vue warn]: Missing required prop — Vue: [Vue warn]: Missing required prop: "title" (Vue)[Vue warn]: Missing…[Vue warn]: Set operation on key failed: target is readonly — Vue: [Vue warn]: Set operation on key "name" failed: target is readonly. (Vue)[Vue warn]: Set ope…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…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…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…unique key prop — Warning: Each child in a list should have a unique "key" prop (React)unique key propuncontrolled to controlled — Warning: A component is changing an uncontrolled input to be controlled (React)uncontrolled to con…IndexError — IndexError: list index out of range (Python)IndexErrorObjects are not valid as a React child — Error: Objects are not valid as a React child (React)Objects are not val…Nothing was returned from render — Error: Nothing was returned from render. This usually means a return statement is missing. (React)Nothing was returne…Adjacent JSX elements — Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (React)Adjacent JSX elemen…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedCan't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'Dynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usagepath-to-regexp — TypeError: Missing parameter name at 1 (path-to-regexp) (Node.js)path-to-regexpNo routes matched — No routes matched location "/x" (React)No routes matchedPrerender error — Error occurred prerendering page "/x". Read more: https://nextjs.org/docs/messages/prerender-error (React)Prerender errorCORS blocked (Laravel API) — 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 (Laravel)CORS blocked (Larav…Hydration error: <div> cannot be a descendant of <p> — 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 (Next.js)Hydration error: <d…createContext 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 …TS2339 — TS2339: Property 'x' does not exist on type 'Y'. (Node.js)TS2339Avoid mutating a prop directly — Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders (Vue)Avoid mutating a pr…TS2551: Property does not exist. Did you mean — TypeScript: error TS2551: Property 'lenght' does not exist on type 'string'. Did you mean 'length'? (TypeScript)TS2551: Property do…Property was accessed during render but is not defined — Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance (Vue)Property was access…TS7031: Binding element implicitly has an 'any' type — TypeScript: error TS7031: Binding element 'name' implicitly has an 'any' type. (TypeScript)TS7031: Binding ele…[Vue warn]: Extraneous non-props attributes — Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes (Vue)[Vue warn]: Extrane…[Vue warn]: Invalid prop: type check failed — Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5" (Vue)[Vue warn]: Invalid…[Vue warn]: Maximum recursive updates exceeded — Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself (Vue)[Vue warn]: Maximum…[Vue warn]: Write operation failed: computed value is readonly — Vue: [Vue warn]: Write operation failed: computed value is readonly (Vue)[Vue warn]: Write o…ELIFECYCLE — 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-sassNextRouter was not mounted — Error: NextRouter was not mounted. (React)NextRouter was not …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 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 attempting …

Directly related (12)

key is not a propReact

Warning: `key` is not a prop. Trying to access it will result in `undefined` being returned.

A component tried to read props.key, which React reserves and never passes down.

non-boolean attributeReact

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.

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.

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.

TS2741: Property is missing in type but required in typeTypeScript

TypeScript: error TS2741: Property 'email' is missing in type '{ name: string; }' but required in type 'User'.

An object lacks one required property of the target type.

[Vue warn]: Missing required propVue

Vue: [Vue warn]: Missing required prop: "title"

A component marked a prop as `required` but the parent didn't pass it.

[Vue warn]: Set operation on key failed: target is readonlyVue

Vue: [Vue warn]: Set operation on key "name" failed: target is readonly.

You mutated a readonly reactive object (props, `readonly()`, `shallowReadonly`, or a frozen/store state).

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.

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.

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 (33)

unique key propReact

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.

uncontrolled to controlledReact

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.

IndexErrorPython

IndexError: list index out of range

Code accessed a list position that doesn’t exist.

Objects are not valid as a React childReact

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…

Nothing was returned from renderReact

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.

Adjacent JSX elementsReact

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.

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.

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.

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

path-to-regexpNode.js

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 matchedReact

No routes matched location "/x"

React Router found no route definition for the current URL.

Prerender errorReact

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.

CORS blocked (Laravel API)Laravel

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.

Hydration error: <div> cannot be a descendant of <p>Next.js

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.

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.

TS2339Node.js

TS2339: Property 'x' does not exist on type 'Y'.

TypeScript’s type for the object doesn’t include that property.

Avoid mutating a prop directlyVue

Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

A child component assigned to a prop. Props flow one way — the parent owns the value.

TS2551: Property does not exist. Did you meanTypeScript

TypeScript: error TS2551: Property 'lenght' does not exist on type 'string'. Did you mean 'length'?

A property name is misspelled (TypeScript suggests the closest valid one).

Property was accessed during render but is not definedVue

Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance

The template references a variable/function that the component doesn’t expose.

TS7031: Binding element implicitly has an 'any' typeTypeScript

TypeScript: error TS7031: Binding element 'name' implicitly has an 'any' type.

A destructured parameter has no type, so its elements default to `any`.

[Vue warn]: Extraneous non-props attributesVue

Vue: [Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes

Attributes (class, style, listeners) passed to a component can't be applied because the component has multiple root nodes.

[Vue warn]: Invalid prop: type check failedVue

Vue: [Vue warn]: Invalid prop: type check failed for prop "count". Expected Number with value 5, got String with value "5"

A prop received a value of the wrong type.

[Vue warn]: Maximum recursive updates exceededVue

Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself

A watcher/computed/render effect keeps changing the state it depends on, creating an infinite update loop.

[Vue warn]: Write operation failed: computed value is readonlyVue

Vue: [Vue warn]: Write operation failed: computed value is readonly

You assigned to a `computed` that has no setter.

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.

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.

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 are attempting to export "metadata" from a component marked with "use client"Next.js

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

`metadata`/`generateMetadata` can only be exported from Server Components.