The ReferenceError: document is not defined in JavaScript is an error commonly encountered by developers when working with JavaScript.
In this article, we will discuss what causes the ReferenceError: document is not defined error, and how to fix it.
What is a ReferenceError: document is not defined?
A ReferenceError: document is not defined occurs when the code being executed attempts to access the document object, which is not defined in the context of the JavaScript code being executed.
The document object is a global object that is available in the browser environment and contains information about the current page, such as the page’s title, body, and URL.
What Causes the ReferenceError: document is not defined in JavaScript?
The ReferenceError: document is not defined in JavaScript occurs due to the following reasons:
- Trying to access the
documentobject, which is not defined in the context of the JavaScript code. For example, when the code runs outside a web browser environment (Node JS). - This can also occur when the code runs in a browser, but the code is executed before the HTML document is fully loaded.
- Trying to access the
documentobject on the server. For example, server-side rendering in Next.js.
How to fix the ReferenceError: document is not defined?
1. Trying to access the document object, which is not defined in the context
The document object represents the web page loaded by the browser.
Node.js doesn’t offer an environment for browsers. It’s a server-side runtime, meaning we cannot use documents as a document variable in Node.
2. The code executes before the HTML document is fully load
If you got the ReferenceError: document is not defined error in the browser, move the script tag to the bottom of the body tag.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<!-- Your HTML here -->
<!-- 👇️ Script at bottom of body -->
<script type="module" src="main.js"></script>
</body>
</html>There may be some add-ons running before the DOM is created.
You can also wait until the HTML document has been fully loaded using the window.onload event.
3. Trying to access the document object on the server
If you’re using Next.js and need to verify if you’re using the browser (can use document) and if you’re on the server (can’t use document), You can use the following code snippet:
if (typeof window !== 'undefined') {
console.log('You are on the browser')
} else {
console.log('You are on the server')
}We checked if the global variable window is not undefined. If the window is defined means, we are on the browser and able to use the document variable.
Conclusion
To fix the ReferenceError document not specified error, ensure that you only use the document global variable in the browser. The variable is related to the Document Object Model, which represents a web page that is loaded by the browser and should not be used on the server (e.g., Node.js).
Learn More:
- Format Date as YYYY-MM-DD in JavaScript
- Arrow Function in JavaScript
- Simulate a Keypress Event Programmatically in JavaScript
- SyntaxError cannot use import statement outside a module in JS
- Pad a Number with Leading Zeros in JavaScript
- Unexpected identifier Error in JavaScript
- Dynamically Access Object Property Using Variable in JavaScript
- Check if a Key exists in an Object in JavaScript
- Replace All String Occurrences in JavaScript
- Get the Last N Elements of an Array in JavaScript
