ReferenceError: window is not defined Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

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.

Exact message you may see ReferenceError: window is not definedwindow is not defined next.jsReferenceError: self is not definedReferenceError: navigator is not definedError occurred prerendering page ReferenceError: window is not defined
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Guard with typeof window !== 'undefined', move the access into useEffect (client only), or load the browser-only component with next/dynamic and ssr: false. Third-party libs that read window at import time need dynamic import.

Common causes

  • window.innerWidth/localStorage at module or render time
  • Library accessing window on import (charts, editors, maps)
  • Server Component using browser API
  • Top-level window access in utility files
  • Pre-rendering at build time

⚡ Quick fix

  1. useEffect(() => { /* window usage */ }, [])
  2. const Map = dynamic(() => import('./Map'), { ssr: false }) in a Client Component
  3. Guard: typeof window !== "undefined"

Detailed fix by platform

Next.js

  1. "use client"; const Chart = dynamic(() => import("react-apexcharts"), { ssr: false });

How to diagnose

  1. Where — Render or import time?
  2. Library — Browser-only?
  3. Component — Client or server?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[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]: Hydration…Can't resolve 'fs' — Module not found: Can't resolve 'fs' (Next.js / webpack 5) (React)Can't resolve 'fs'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 p…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: <div…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 fai…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: JavaScrip…Nuxt: Hydration completed but contained mismatches — Nuxt: [Vue warn]: Hydration completed but contains mismatches. (Vue)Nuxt: Hydration compl…Nuxt: window/document/localStorage is not defined (SSR) — Nuxt: ReferenceError: window is not defined / 500 Internal Server Error during SSR (Vue)Nuxt: window/document…Reference…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.