Skip to main content

How to Solve the "ReferenceError: window is not defined" Error in JavaScript

The ReferenceError: window is not defined error occurs when your JavaScript code attempts to access the window object in an environment where it does not exist. The window object is the global object in a browser environment, representing the browser window that contains your web page. It is not available in server-side JavaScript environments like Node.js.

This guide will explain the fundamental reason this error happens and provide the correct solutions for handling it in different contexts, including vanilla Node.js and server-side rendering (SSR) frameworks like Next.js and React.

The Core Problem: Browser vs. Server Environments​

It's crucial to understand the two different environments where your JavaScript code can run:

  • The Browser (Client-Side): This is the user's web browser (Chrome, Firefox, etc.). It provides a specific set of global variables and APIs for interacting with the web page and browser, with window being the top-level global object. All other browser globals like document, location, and navigator are properties of window.

  • The Server (e.g., Node.js): This is a JavaScript runtime that runs on a server. It has its own set of built-in APIs for server-side tasks, such as fs (file system) and http (networking). Its global object is called global. It has no concept of a "window", and therefore, the window object is not defined.

The error is a clear signal that you are trying to run browser-specific code in a server environment.

Solution for Node.js: Avoid Browser Globals​

If you are writing a script that is only intended to run in Node.js, you cannot use browser-specific APIs.

Example of problem:

// Problem: This code will crash when run with `node my_script.js`
console.log(window.innerWidth);

Error Output:

ReferenceError: window is not defined

Solution: you must use Node.js-specific APIs or libraries to achieve your goal. For example, if you need to create global variables in Node.js, you would assign them as properties of the global object, although this is generally discouraged in favor of using ES modules (import/export).

Solution for SSR (Next.js, React, etc.): The useEffect Hook​

In frameworks that use Server-Side Rendering (SSR) or Static Site Generation (SSG) like Next.js, your component code often runs twice: once on the server to generate the initial HTML, and a second time on the client (the browser) to make it interactive.

The window is not defined error happens when code that needs the window object tries to run during the server-side build.

Example of problem:

// Problem: This will crash during the server-side render
// because `window` doesn't exist on the server.
function MyComponent() {
  // This line causes the error
  const screenWidth = window.innerWidth;
  
  return <div>The screen width is {screenWidth}</div>;
}

Solution: place any code that needs to access window or document inside a useEffect hook with an empty dependency array ([]). The useEffect hook only runs on the client side, after the component has mounted in the browser.

import { useState, useEffect } from 'react';

function MyComponent() {
  const [screenWidth, setScreenWidth] = useState(0);

  // Correct: This code will only run in the browser.
  useEffect(() => {
    // We can safely access window.innerWidth here
    setScreenWidth(window.innerWidth);
  }, []); // The empty array ensures this runs only once on mount.

  return <div>The screen width is {screenWidth}</div>;
}

A Universal Check: typeof window​

If you have a piece of code that needs to run in a "universal" context (both server and client), you can check for the existence of the window object to determine the current environment.

Solution:

const isBrowser = typeof window !== 'undefined';

if (isBrowser) {
  // This code will only run on the client (in the browser)
  console.log('Running on the browser, window is available.');
  console.log(window.location.href);
} else {
  // This code will only run on the server
  console.log('Running on the server, window is not available.');
}
note

This is a reliable way to guard your browser-specific code and prevent it from running on the server.

A Common Mistake: Misspelling window​

A less common but simple cause of the error is a typo. The window global object is always all lowercase.

Example of problem:

// Problem: 'Window' is capitalized.
const width = Window.innerWidth;

Error Output:

ReferenceError: Window is not defined

The Solution ensures the variable is spelled correctly in all lowercase.

// Correct: 'window' is all lowercase.
const width = window.innerWidth;

Conclusion​

The ReferenceError: window is not defined error is a fundamental indicator of an environment mismatch.

To solve it:

  • If you are in a Node.js environment, you cannot use the window object. You must use Node-specific APIs.
  • If you are in a React/Next.js component, move any code that accesses window inside a useEffect hook.
  • For "universal" code, use the check if (typeof window !== 'undefined') to ensure your browser-specific code only runs on the client.
  • Finally, double-check that you haven't simply misspelled window (it must be lowercase).

Table of Contents