Error map

Nuxt: window/document/localStorage is not defined (SSR) Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR

Vue · 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.

Nuxt: window/document/localStorage is not defined (SSR) — Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR (Vue)Nuxt: windo…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failedvalidateDOMNesting — Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. (React)validateDOMNestinguseLayoutEffect SSR — Warning: useLayoutEffect does nothing on the server (React)useLayoutEffect SSRProp did not match — Warning: Prop `className` did not match. Server: "x" Client: "y" (React)Prop did not matchReferenceError: document is not defined — Next.js: ReferenceError: document is not defined (Next.js)ReferenceError: doc…ReferenceError: localStorage is not defined — Next.js: ReferenceError: localStorage is not defined / sessionStorage is not defined (Next.js)ReferenceError: loc…ReferenceError: window is not defined — Next.js: ReferenceError: window is not defined (server-side rendering) (Next.js)ReferenceError: win…TypeError: Failed to parse URL from /api/... — Next.js: TypeError: Failed to parse URL from /api/posts (fetch in a Server Component) (Next.js)TypeError: Failed t…[Vue warn]: Hydration node/text/children mismatch — Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom (Vue)[Vue warn]: Hydrati…Nuxt: Hydration completed but contained mismatches — Nuxt: [Vue warn]: Hydration completed but contains mismatches. (Vue)Nuxt: Hydration com…useAsyncData/useFetch must be called in setup (key/context) — Nuxt: [nuxt] [useAsyncData] key must be a string / useFetch only works inside setup, plugins or middleware (Vue)useAsyncData/useFet…Nuxt: Failed to fetch dynamically imported module (after deploy) — Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed (Vue)Nuxt: Failed to fet…ReferenceError — ReferenceError: x is not defined (JavaScript)ReferenceErrorObjects are not valid as a React child — Error: Objects are not valid as a React child (React)Objects are not val…Invalid hook call — Error: Invalid hook call. Hooks can only be called inside of the body of a function component. (React)Invalid hook calluncontrolled to controlled — Warning: A component is changing an uncontrolled input to be controlled (React)uncontrolled to con…Adjacent JSX elements — Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (React)Adjacent JSX elemen…setState during render — Warning: Cannot update a component (`Parent`) while rendering a different component (`Child`) (React)setState during ren…react-hooks/exhaustive-deps — React Hook useEffect has a missing dependency (react-hooks/exhaustive-deps) (React)react-hooks/exhaust…async useEffect — Warning: useEffect must not return anything besides a function, which is used for clean-up. It looks like you wrote useEffect(async () => ...) (React)async useEffectMaximum update depth — Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. (React)Maximum update depthnot wrapped in act — Warning: An update to Component inside a test was not wrapped in act(...) (React)not wrapped in actnext 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…Conflicting 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…QuotaExceededError — QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value exceeded the quota (JavaScript)QuotaExceededErrorCan't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'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…Dynamic server usage — Error: Dynamic server usage: Route /x couldn't be rendered statically because it used `cookies` (React)Dynamic server usagePage is missing generateStaticParams() (output: export) — Next.js: Page "/blog/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config (Next.js)Page is missing gen…process.env.X is undefined in the browser (NEXT_PUBLIC_) — Next.js: process.env.API_URL is undefined in Client Component / env variable not available in the browser (Next.js)process.env.X is un…Vite: Failed to parse source / Unknown file extension ".vue" — Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format (Vue)Vite: Failed to par…vue-loader was used without the corresponding plugin — Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. (Vue)vue-loader was used…ESLint Parsing error in .vue files — ESLint: Parsing error: Unexpected token < / Parsing error: '>' expected (vue-eslint-parser not configured) (Vue)ESLint Parsing erro…Nuxt 404: Page not found (route/file naming) — Nuxt: 404 Page not found: /blog/my-post / [Vue Router warn]: No match found for location with path (Vue)Nuxt 404: Page not …Nuxt/Vite: Failed to resolve import "~/..." or "@/..." — Nuxt: [vite] Internal server error: Failed to resolve import "~/components/Foo.vue" from "pages/index.vue". Does the file exist? (Vue)Nuxt/Vite: Failed t…[Vue warn]: Failed to locate Teleport target with selector — Vue: [Vue warn]: Failed to locate Teleport target with selector "#modal". Note the target element must exist before the component is mounted (Vue)[Vue warn]: Failed …[Vue warn]: onMounted is called when there is no active component instance — Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with (Vue)[Vue warn]: onMount…Unexpected token < — SyntaxError: Unexpected token '<' (HTML served instead of JavaScript) (JavaScript)Unexpected token <MIME type not executable — Refused to execute script from 'x' because its MIME type ('text/html') is not executable (JavaScript)MIME type not execu…ChunkLoadError — ChunkLoadError: Loading chunk 123 failed. (JavaScript)ChunkLoadError

Directly related (12)

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.

validateDOMNestingReact

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.

The JSX produces invalid HTML nesting, which also causes hydration mismatches in SSR.

useLayoutEffect SSRReact

Warning: useLayoutEffect does nothing on the server

A component using useLayoutEffect was server-rendered, where layout effects can’t run.

Prop did not matchReact

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.

ReferenceError: document is not definedNext.js

Next.js: ReferenceError: document is not defined

Code used the DOM (`document`) while rendering on the server.

ReferenceError: localStorage is not definedNext.js

Next.js: ReferenceError: localStorage is not defined / sessionStorage is not defined

`localStorage`/`sessionStorage` was read during server rendering.

ReferenceError: window is not definedNext.js

Next.js: ReferenceError: window is not defined (server-side rendering)

Code touching the browser's `window` ran on the server during SSR/build, where it doesn't exist.

TypeError: Failed to parse URL from /api/...Next.js

Next.js: TypeError: Failed to parse URL from /api/posts (fetch in a Server Component)

`fetch('/api/x')` with a relative URL works in browsers but not on the server, which has no base URL.

[Vue warn]: Hydration node/text/children mismatchVue

Vue: [Vue warn]: Hydration text content mismatch / Hydration node mismatch: server rendered element contains more child nodes than client vdom

Server-rendered HTML differs from what the client renders on first load.

Nuxt: Hydration completed but contained mismatchesVue

Nuxt: [Vue warn]: Hydration completed but contains mismatches.

Server HTML and client render differed; Vue patched the DOM but logs the mismatch.

useAsyncData/useFetch must be called in setup (key/context)Vue

Nuxt: [nuxt] [useAsyncData] key must be a string / useFetch only works inside setup, plugins or middleware

`useFetch`/`useAsyncData` were used in an event handler, after an await, or without a key where one is required.

Nuxt: Failed to fetch dynamically imported module (after deploy)Vue

Nuxt: [nuxt] error caught during app initialization TypeError: Failed to fetch dynamically imported module / Loading chunk failed

A browser tab running the old build requests chunk files that were replaced by a new deployment.

Two steps away (29)

ReferenceErrorJavaScript

ReferenceError: x is not defined

Code refers to a variable or function name that doesn’t exist in the current scope.

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…

Invalid hook callReact

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.

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.

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.

setState during renderReact

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.

react-hooks/exhaustive-depsReact

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.

async useEffectReact

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.

Maximum update depthReact

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.

not wrapped in actReact

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.

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.

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.

QuotaExceededErrorJavaScript

QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value exceeded the quota

localStorage/sessionStorage is full (about 5 MB per origin) or storage is disabled.

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.

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.

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

Page is missing generateStaticParams() (output: export)Next.js

Next.js: Page "/blog/[slug]" is missing "generateStaticParams()" so it cannot be used with "output: export" config

A dynamic route can't be statically exported without telling Next.js which paths to generate.

process.env.X is undefined in the browser (NEXT_PUBLIC_)Next.js

Next.js: process.env.API_URL is undefined in Client Component / env variable not available in the browser

Only variables prefixed `NEXT_PUBLIC_` are exposed to browser code, and they're inlined at build time.

Vite: Failed to parse source / Unknown file extension ".vue"Vue

Vite/Vue: [plugin:vite:import-analysis] Failed to parse source for import analysis — you may need to install appropriate plugins to handle the .vue file format

Vite can't process `.vue` files because the Vue plugin isn't installed/enabled.

vue-loader was used without the corresponding pluginVue

Webpack: Error: [vue-loader] vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.

Webpack config uses `vue-loader` but doesn't add its plugin.

ESLint Parsing error in .vue filesVue

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.

Nuxt 404: Page not found (route/file naming)Vue

Nuxt: 404 Page not found: /blog/my-post / [Vue Router warn]: No match found for location with path

Nuxt's file-based router has no page matching the URL (wrong file/folder names or missing param syntax).

Nuxt/Vite: Failed to resolve import "~/..." or "@/..."Vue

Nuxt: [vite] Internal server error: Failed to resolve import "~/components/Foo.vue" from "pages/index.vue". Does the file exist?

Vite couldn't resolve an alias import — the file doesn't exist at that path or the alias isn't defined.

[Vue warn]: Failed to locate Teleport target with selectorVue

Vue: [Vue warn]: Failed to locate Teleport target with selector "#modal". Note the target element must exist before the component is mounted

`` can't find its target element when mounting.

[Vue warn]: onMounted is called when there is no active component instanceVue

Vue: [Vue warn]: onMounted is called when there is no active component instance to be associated with

A lifecycle hook was registered outside `setup()` (or after an `await`).

Unexpected token <JavaScript

SyntaxError: Unexpected token '<' (HTML served instead of JavaScript)

The browser loaded a .js file but received HTML (an error page or the SPA index.html).

MIME type not executableJavaScript

Refused to execute script from 'x' because its MIME type ('text/html') is not executable

The browser fetched a script but the server labelled it text/html (usually an error page), so it refused to run it.

ChunkLoadErrorJavaScript

ChunkLoadError: Loading chunk 123 failed.

A lazily loaded JavaScript chunk couldn’t be downloaded — usually because a new deployment removed the old hashed files.