How to solve the document is not defined error
Here’s how to fix the “referenceerror: document is not defined” error that you might have in Node.js or with a tool like Next.js.
document
is an object that’s made available by the browser, and it’s not available in a server-side JavaScript environment.
I describe the document
object is details in my extensive DOM Document Object Model guide.
With Node.js in particular there’s no way to workaround the problem - you must find the particular place where document
is used, and revisit the code to figure out why you are accessing the document
object.
You are running frontend code in a backend environment.
In Next.js you can fix this problem by wrapping the code you run in a conditional.
The code might be running in both situations - frontend, when you navigate to a page using a link, and server-side if you require server-side into your page, for example by running getServerSideProps()
.
In this case, you can limit the reference to document
into a conditional that checks if the window
object is available, like this:
if (typeof window !== 'undefined') {
//here `window` is available, so `window.document` (or simply `document`) is available too
}
And this will fix your problem, since you only run anything inside the conditional in a browser environment.
THE VALLEY OF CODE
THE WEB DEVELOPER's MANUAL
You might be interested in those things I do:
- Learn to code in THE VALLEY OF CODE, your your web development manual
- Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
- I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
- Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
- Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
- Find me on X