Document is not defined javascript что делать

Node.js document is not defined

Why node.js does not recognize document.GetElementById? It says ‘ReferenceError: document is not defined’. What can I do?

7 Answers 7

document relates to the DOM (Document Object Model) in a web browser.

Node.js, however, is not a browser environment. It is a server environment, much like PHP or Perl, and as such, you can’t access the browser’s DOM or do anything specific to browser-hosted JavaScript.

The closest you could get is using something like browserify to include Node.js modules in your client-side code.

You could use JSDom to add Dom support to Node. To make a variable global you can use either

where html is your website as a string.

To use JSDom include it in your project with:

or in plain js with:

I hope this is answering your question.

To understand the answer, it’s necessary to know the relationship of: Javascript Engine, Browser and Node.js.

Javascript Engine: is Javascript compiler which turns JS into machine code. For example, V8, is a great one. Technically V8 is developed in C++ (you can regard it as a C++ program).

V8 implements ECMAScript, which is a standard of Javascript language defining the features and functionalities of JavaScript.

But DOM operation is not defined by ECMAScript. So V8 doesn’t support it.

Browser: And developers can use document for DOM operation in browser, because DOM operation is provided by browser, for example: Chrome.

Chrome is also developed by C++ and V8(as mentioned abvoe, which is developed by C++ as well) is embedded into Chrome to interpret Javascript. So Chrome expends or adds features to Javascript by binding JS command and C++ implementation together.

Nodejs: different from the Chrome, it is a server side program. But the same thing is that Nodejs is developed by C++ and V8 is embedded into Nodejs to handle js. Nodejs expands features of Javascript in the similar way with Chrome. But since server side doesn’t need to handle DOM, so you can not access such functions inside Nodejs.

Fix ReferenceError: document is not defined in JavaScript

JavaScript forms an inseparable part of nearly every web development application. It adds dynamic to the plain HTML + CSS webpage and allows users to engage. But developers often face many errors because of JavaScript’s involvement with the client and the server. In this article, we will go over the uses of JavaScript in web development, a bit of client-server model introduction, and what exactly is client-side and server-side and the error: “ReferenceError: document is not defined” and see solutions to fix it.

Use of JavaScript

Take a look at the image below:

Webpage with JavaScript disabled

Are we getting a slightly different vibe than the usual Chrome search page? Yes! But why is that so? The search bar looks different, and the results look a bit funny. We have captured this image after disabling JavaScript in Chrome. The request we sent (we will cover this later) returned a complete webpage. The webpage only displays HTML and CSS after omitting JavaScript.

Webpage with JavaScript enabled

Whoa! A completely different story here! JavaScript completely changes the outlook of a page. It improves its look and feels and participates in user engagement. Users click on a website link, click on different tabs, hover over tabs and images, and so on. Thus, nearly all web development stacks (like the MERN stack) bundle HTML, CSS, and JavaScript.

Client-side and server-side

We use the terms client-side and server-side to refer to the place where the web application will execute. To give a brief glossary of the client-server model, we classify the devices on the network into clients and servers. The end-user applications, such as mobiles, desktops, and laptops, become the clients. And the large systems handling multiple clients at the same time comprise the servers. Like in the real world, the client “requests” a piece of information by sending an API call to the server. The server, in turn, sends a “response” with the appropriate payload back to the client.

Client-side implies that the web application executes on the client’s browser. All the text, images, user actions, and all the application’s activities run on the client side. On the other hand, server-side means everything mentioned above occurs on the server side.

Reasons for the error

Let’s take a look at the error:

Using Node.js

Node.js is a server-side runtime. It is mainly in charge of handling the backend of the web application. Therefore, Node.js can do little with the actual DOM manipulation of the webpage on the client side. Thus, we encounter this error when accessing “document” on Node. Node.js does not access the document object, so referencing it causes this error. We do not have a particular workaround for this issue as we are trying to use a “front-end” code on a “backend” situation, which is improper practice. I suggest inspecting your code and figuring out why you need the “document.”

This cause, although discussed for Node.js, applies to all server-side architectures like ASP.NET, PHP, and so on. While using any of them, we can come across this error. So, the best way to prevent this is to ensure we are not executing any front-end code on a backend framework.

Browser issue

You will say that we are executing the front-end code in the browser itself. Then why should we face this error? This situation may arise if we access the document object too early. When the browser loads the webpage, it first creates a base HTML where we mount the JavaScript. Now at this point, we load up the entire web application along with the Document Object Model (DOM) as well. So we will face this error when accessing the document object before this web application is mounted.

As we know, the document is an in-memory representation of the DOM. Therefore it will exist if and only if the DOM itself exists. The most common reason this happens in general code is if we define the <script> tag before the <body> ends in the HTML file. I recommend defining the <script> tag in the body just before it ends. This will ensure that the HTML loads before mounting the <script> . Therefore, the DOM is ready on the browser end for the JavaScript to manipulate.

Catching the error

Here we will discuss ways to catch this error so that you know exactly when and where to look for it. If we execute the code on the front end, and the DOM exists, so will the document object exist. Therefore, in other scenarios, if we look closely at the error, it says: document is not defined. Thus, the document object value will be “undefined.” We can check this by console logging the value of the document (always a tremendous debugging practice!) We utilize this to check for this error and catch it.

Using just a simple if-else statement, we will be able to check for this error. We can do this in the code modeled below:

We will add our code to execute inside the if block. This is so because the document object value comes out to be undefined. Therefore, we can be sure that the error “document is not defined” will not be raised. On the other hand, if the value does come out to be “undefined” for some reason, then we will execute the else block. We use our error code if we need something precisely executed in such a scenario. Otherwise, we can raise an error to alert the user about the issue. I highly recommend you use this structure for error debugging, not only in this specific case but also in a generic setting.

Conclusion

To conclude, I suggest taking preventive measures to be alert to these errors. It can be a real headache to start debugging the error source in an extensive application (personal experience XD). Please do not use any front-end code on your backend system, as it will undoubtedly throw an error. Only declare your <script> tag after the document is ready. Try understanding the client-server model’s basics to appreciate this error’s necessity fully. Also, always use a try-catch or if-else block to catch these errors. Research more about any errors you face and always Google your queries because the internet has an enormous resource for every issue you face. Happy Coding!

Free money-back guarantee

Unlimited access to all platform courses

100's of practice projects included

ChatGPT Based Instant AI Help (Jarvis)

Structured Full-Stack Web Developer Roadmap To Get A Job

Exclusive community for events, workshops

Sharing is caring

Did you like what Sanchet Sandesh Nagarnaik wrote? Thank them for their work by sharing it on social media.

How to solve reference error: document is not defined in JavaScript

To solve reference error: document is not defined in JavaScript, try to shift your script tag at the very last on your body tag or make sure you use the global document variable in the browser. It is the most common error when running an HTML file in the browser.

There are specific reasons for the “ ReferenceError: document is not defined” error, such as:

Using “document” while using Node.js.
Using “document” on the server (SSR on NextJS)
Misspelled the global variables; global variables should be in lower cases.

How to solve ReferenceError: document not defined in Node.js

To solve the“ReferenceError: document is not defined” error in Node.js, make sure you don’t use the document global variable . The variable relates to the Document Object Model, which represents a web page loaded in the browser and can’t be used on the server-side platform like Node.js.

Write the below code in the index.html file.

Now, write the below code inside the app.js.

If you run the file, it will give the following error.

You cannot use the document object on the server-side platform like Node.js because Node.js does not have a global “window” object. However, if the “window” global is defined, we are on the browser and can use the “document” variable.

Refer to the below fix code.

If the window object is undefined, then it means we are running JavaScript in Node.js, and if it does not, then it means we are in the browser and applying the browser solution in your project.

That’s it for this tutorial.

How To Fix ReferenceError document is not defined in JavaScript

In a previous post we discussed why and how to safely use the window object in JavaScript. If you are trying to use the document object and receiving a ReferenceError: document is not defined error then there is a good chance you have run into a similar problem. This object is actually a property of the window object so many of the same causes and solutions apply. You’ll want to ensure that you really need to use it first and if you do, add some logic to safely access the variable.

The Problem

The document object in JavaScript is very important to understand and use — especially when you are working with vanilla JavaScript. The whole purpose of JavaScript in the context of frontend web development is to interact with and manipulate the DOM of a web page and the document object gives you many of the properties and methods you need to be able to do just that. Some of those include:

document.getElementById()
document.URL
document.title

These are essential when it comes to interacting with a webpage using JavaScript. The problem is that these are only available in a browser environment. If you aren’t in such an environment you will get the document is not defined error mentioned above. For example, if you are working with a server-side rendered (SSR) application using Next.js, Gatsby.js, or something similar, you may run into this error while working on the frontend.

The Solution

The first thing you will want to do is make sure you truly need to use the document object. It is fairly easy to safely access the document object if you decide that you need it based on your use case. For example, to get a web page’s title only when you are in a browser environment:

let title = ""; if (typeof document !== "undefined") < title = document.title; >console.log(title); // » if in a Node.js environment

Often times you can just replace your usage of document rather than trying to safely access it. In React, for example, you may be tempted to access a DOM element using document.getElementById() . Fortunately, React has its own concept called Refs for handling DOM elements that you might consider using instead. Doing so means you will not have to worry about the document possibly being undefined (if you are using Next.js or Gatsby.js, for example).

There are many benefits to using Refs in React other than simply replacing document usage in your app. Understanding the entirety of their potential use is out of the scope of this post but you can start your learning with the official React documentation here .