The solutions mentioned in this article will help you to fix the error “ReferenceError: document is not defined”. In some case you may encounter it in Node.js or with Next.js. Follow these instructions to fix it.
Find more about JS Type of Errors
What causes the error “ReferenceError: document is not defined”?
The error “ReferenceError: document is not defined” in Node.js occurs when the document object you are calling is not defined in your code.
The document object in JavaScript represents the entire HTML document.
When the HTML document is loaded in the browser, it becomes a document object. The document object is a property of the window object.
You can’t find the window and document objects when your code is generated on the server side(using the Next JS). So it will cause the error.
The error may appear as below:
ReferenceError: document is not defined
try running it on browser not on node.js
One more case you can encounter is a misspelled document object. You must write all in lowercase, the implicit rule in object naming in javascript.
Solutions to fix “ReferenceError: document is not defined” error
Solution 1: Using the dynamic rendering
If you use the Next JS framework for your website and rendering on the server side, you should use dynamic rendering to generate what you want, like so:
import dynamic from 'next/dynamic'
const DynamicComponentWithNoSSR = dynamic(() => import('../components/List'), {
ssr: false
})
Then insert the code you want to execute on the client side. Below is the code using the useEffects of React Hook:
const DynamicComponentWithNoSSR = <>Some JSX</>
export default function App(){
[a,setA] = useState();
useEffect(() => {
setA(<DynamicComponentWithNoSSR/>)
});
return (<>{a}<>)
}
Solution 2: Check if the document object is defined
More straightforwardly, you can check if the document object is defined or not:
if (typeof document === 'undefined') {
// during server evaluation
}
else {
// during client's browser evaluation
}
If only you need to run the browser of the client. Just do the following, the error will be fixed without resorting to dynamic rendering:
var body = null;
if (typeof document !== 'undefined') {
// will run in client's browser only
body = document.getElementsByTagName("body")[0];
}
Another thing that can fix the “ReferenceError: document is not defined” error is that you have to put the script tag at the end of the body tag. Now call the document object. It was defined before rendering DOM:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/quiz.css" />
</head>
<body>
<div id="divid">Next</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Summary
To avoid getting the “ReferenceError: document is not defined” error, you must ensure the document object is written correctly. Besides, you must decide whether you are on the browser or the server. Calling the document object on the server will cause an error in your code, so be careful when using this object.
Maybe you are interested in similar errors:
- ReferenceError: document is not defined in JavaScript
- “forEach is not a function”
- Uncaught SyntaxError: Unexpected token
- Cannot read properties of undefined

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.
Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css