For web developers using Javascript programming language, it is customary to encounter errors during project execution. The error “ReferenceError: window is not defined” in JavaScript is a prevalent error. Let’s solve it by following the instructions below.
Why does the error “ReferenceError: window is not defined” in JavaScript occur?
When learning about how to create a complete website, you will know that it consists of 2 parts: front end and back end.
The front end is where the UX/UI elements are located. According to the DOM model, the window is the largest object to hold elements.
The back end is where the server handles the logical features and signals that the front end sends and then responds to the front end, where the elements are displayed.
The occurrence of the error “ReferenceError: window is not defined” in JavaScript means that the window object is not defined in your file. Why so? The window is the biggest object in the browser. Why can’t it recognize it? When you use server-side rendering (SSR) or static site generation (SSG) on existing media like NodeJS or NextJS, it will gather the data to one side for processing. If your file is collected to the server for processing, it will cause this error because the host window is not predefined.
Error code may appear below.
ReferenceError: window is not defined
at file:main.js
How to fix the error “ReferenceError: window is not defined” in JavaScript?
Use the try-catch statement.
The simple solution is to use the try-catch statement to catch the error. With this syntax, each time the code in the try block encounters an error, it will stop and run the code in the catch block.
Syntax
try {
// code executive
} catch (err) {
// code for error
}
With the problem, we use the try-catch syntax to catch the error as follows.
try { window; } catch (err) { console.log("We got an error, window is not defined!"); }
Output
We got an error, window is not defined!
This way, your code will still be run, but window-related things will not be done. Instead, it will log the message as above.
Use if statement
This tool is too familiar for us to use to solve this problem. Check if the window object has been initialized or not, as follows
if (typeof window !== "undefined") { console.log("We are on the browser, window has been initialized."); } else { console.log("We are on the server, is not possible."); }
Output
We are on the server, is not possible.
The check is quite simple. With the typeof syntax, we can check whether the window object is initialized and print the message you want in each case.
Summary
The error “ReferenceError: window is not defined” in JavaScript is not often encountered when you are only working with a server or browser side, but when entering the actual project, the error is very common. Follow each step as instructed to create a quality product and solve the problem. Thank you for reading.
Maybe you are interested:
- ReferenceError: Cannot access before initialization in JS
- “ReferenceError: moment is not defined” in JavaScript
- “ReferenceError: path is not defined” in JavaScript
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