“ReferenceError: document is not defined” – How To Fix?

Posted on by Tom Joseph
ReferenceError: document is not defined in Node.js

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:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *