isotropic-2022
Share
Blog
Search
Menu

How To Fix ReferenceError document is not defined in JavaScript

By Greg Murray
|
Last updated on April 18th, 2022
|

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.

To replace document.getElementById() with Refs do the following:

function App() { const inputRef = useRef(null); const focusInput = () => { const element = document.getElementById("myInput"); // replace this const element = inputRef.current; // with this element.focus(); }; return ( <div> {/* you can remove the id on the element */} <input type="text" ref={inputRef} id="myInput" /> <button onClick={focusInput}>Focus</button> </div> ); }

Conclusion

As powerful as it is, the document object does still have its pitfalls — especially if you try to use it in a Node.js environment or with an app that is built in a Node.js environment before running in the browser. If you follow the steps in this article you can either replace or properly use document and be back to creating your web app in no time.

The Isotropic Codex is a collection of code snippets and education for WordPress, web and WooCommerce developers.
References
Subscribe & Share
If you liked this content, subscribe for our monthly roundup of WordPress news, website inspiration, exclusive deals and interesting articles.
Unsubscribe at any time. We do not spam and will never sell or share your email.
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Article By
Greg Murray
Contributors/Editors
notloggedin
I’m a passionate and driven web developer with an eye for design and appreciation for the human aspect of technology. I am experienced with building websites for small to medium businesses or large web applications for big businesses. Websites can be custom made using cutting edge technology and responsive design or created using the website builder of your choice.
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
Love web dev? Join the Isotropic weekly newsletter.
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
0

Your Cart is Empty