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

Next.js: ReferenceError: document is not defined

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

Exact message you may see ReferenceError: document is not defineddocument is not defined Next.js SSRReferenceError: document is not defined at createPortalError occurred prerendering page document is not defined
Explore the map of this error Full error map →
Seen on: Next.js React

Meaning

Same cause as window is not defined: DOM APIs exist only in the browser. Use refs and useEffect, portals created after mount, or dynamic(..., { ssr: false }) for DOM-heavy libraries (editors, charts). For createPortal(document.body) wait until mounted.

Common causes

  • document.getElementById during render
  • Portal using document.body on the server
  • Libraries touching document at import
  • SSR of a component meant for the client
  • Script injection code at module level

⚡ Quick fix

  1. Move DOM code into useEffect
  2. Mount flag: const [mounted,setMounted]=useState(false) before portals
  3. Dynamic import with ssr: false

Detailed fix by platform

Next.js

  1. useEffect(() => { document.title = "Hello"; }, []);

How to diagnose

  1. Code — Render or effect?
  2. Portal — Mounted guard?
  3. Lib — SSR-safe?

🔧 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…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 failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failednext 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…Prop did not match — Warning: Prop `className` did not match. Server: "x" Client: "y" (React)Prop did not matchReference…

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.