How to Fix Reference error: window is not defined in JavaScript

by

ReferenceError: window is not defined typically occurs in JavaScript environments that do not have a window object.

The window object is a part of the Web API provided by browsers, and it represents the browser’s window containing the DOM document.

Common reasons for the error

Running JavaScript Outside of a Browser:

You are trying to run browser-specific code in an environment that is not a web browser, like Node.js.

Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine, and it does not provide a window object because it is intended for server-side applications, not for running a web page or handling the browser’s Document Object Model (DOM).

Server-Side Rendering Frameworks:

You are using a universal (isomorphic) JavaScript framework (like Next.js, Nuxt.js, or Angular Universal) that renders pages on the server before sending them to the client.

If your code attempts to access the window during server-side rendering, this error will occur because the window doesn’t exist on the server.

Reproduce the error

// Window is not defined
const Register=()=>{
   console.log(window.location.pathname);
   return (<div>
      <h1>Solving Window not defined Error</h1>
      </div>);
 }

export default Register;

This code will generate a server error ‘window is not defined’. So let’s see how to fix it.

How to fix reference error: window is not defined

To fix the reference error: window is not defined in JavaScript, add an if statement inside which we are using process.browser at the client-side is a predefined function and returns a boolean type.

// Fixing Window is not defined

const Register = () => {
  if (process.browser) {
     console.log(window.location.pathname);
  }

  return (<div>
            <h1>Solving Window not defined Error</h1>
          </div>);
}

export default Register;

Here we are adding an if statement inside which we are using the process.browser which is a predefined function and returns a boolean type. This function is used client-side.

So that means if we are on the client-side we can use this function for window operations. We can write window operations inside this ‘if’ statement and this is how we will be able to fix the ‘window not defined’ error.

Now if we want to print the window on an HTML page. Refer to the following code.

// Fixing Window is not defined

const Register = () => {
   if (process.browser) {
      console.log(window.location.pathname);
   }

   return (<div>
            <h1>Solving Window not defined Error</h1>
            {process.browser && window.location.pathname}
   </div>);
}

export default Register;

We have added {process.browser && window.location.pathname} inside return so as soon as a process.browser returns true we are executing window.location.pathname on the browser.

To get the full URL instead of the page name in the window we can replace “pathname” with “href”.

Remember to handle the absence of window gracefully, providing fallbacks or server-side compatible code paths to ensure your application can render properly on the server and bootstrap from that state in the browser.

See also

How to solve reference error: window is not defined