Blog

You can get the reference error – window is not defined in JavaScript due to any of the following reasons –

1. ‘window’ is used on a server-side JavaScript environment like Node.js
2. ‘window’ is used on the server side in React.js or Next.js (can be used on browser)
3. You have misspelled ‘window’ (all lower case)
4. You are using a browser extension which is blocking the ‘window’ object

Let’s look at each of these in detail –

1) ‘window’ Is Used On A Server-Side JavaScript Environment Like Node.js

This is one of the most common reasons for getting the reference error – ‘window is not defined’. The ‘window’ object is part of the browser and it is not available in Node.js, which is a server-side JavaScript environment.

If you are using Node.js and you are trying to access the ‘window‘ object, you will get the following error –

ReferenceError: window is not defined

For example –

Consider the following code –

let title = window.document.title;

console.log(title);

This will give you the following error –

ReferenceError: window is not defined

Unfortunately, there is no workaround for this. You will have to find another way to do what you are trying to do. You should not be using ‘window’ in Node.js. If you have to declare global variables, use global instead like this –

global.someVariable = "someValue";

But then again, it’s a lot better to export a variable in Node.js and import it in the file where you need it.

For example –

In fileA.js –

export const someVariable = "someValue";

In fileB.js –

import { someVariable } from "./fileA"

console.log(someVariable); // someValue

2) ‘window’ Is Used On The Server Side In React.js Or Next.js (Can Be Used On Browser)

If you are using React.js or Next.js with server-side rendering (SSR), the ‘window’ object is not available on the server side. That’s because it is only available in the browser.

So if you are using code like this –

import React from "react";

class App extends React.Component {

componentDidMount() {

let title = window.document.title;

  console.log(title);

}

render() {

 return (

  <div>

    Hello World!

  </div>

 );

}

}

export default App;

you will get the following error on the server side –

ReferenceError: window is not defined

The workaround for this is to use a conditional statement that checks if window is defined before accessing it.

Here is how you can do that –

import React from "react";

class App extends React.Component {

componentDidMount() {

  if(typeof window !== "undefined") {

  let title = window.document.title;

  console.log(title);

  }

}

render() {

  return (

   <div>

     Hello World!
   
   </div>

  );

}

}

export default App;

3) You Have Misspelled ‘window’ (All Lower Case)

This is a very common mistake that people make. The ‘window’ object is all lower case. But if you misspell it like this –

let title = Window.document.title;

console.log(title);

you will get the following error –

ReferenceError: Window is not defined

4) You Are Using A Browser Extension Which Is Blocking The ‘window’ Object

This is not very common but it can happen. There are some browser extensions that can block the ‘window’ object. If you are using one of those extensions, you will get the following error –

ReferenceError: window is not defined

The workaround for this is to disable the extension and see if that solves the problem.

These are some of the most common reasons for getting the reference error – ‘window is not defined’. I hope this article was helpful.

If you have any questions, please post them in the comments section below.