Window is not defined ошибка

Next.js is a React framework with pre-rendering abilities. This means that for every page, Next.js will try to generate the HTML of the page for better SEO and performance.

This is why, if you’re trying to do this:

// components/Scroll.js
window.addEventListener("scroll", function() {
  console.log("scroll!")
});

Then it will fail with «ReferenceError: window is not defined»:

Because in the Node.js world, window is not defined, window is only available in browsers.

There are three ways to solve that:

1. First solution: typeof

While you can’t use:

if (window !== undefined) {
  // browser code
}

Because this would try to compare a non-existent variable (window) to undefined, resulting in the mighty «ReferenceError: window is not defined». You can still use:

if (typeof window !== "undefined") {
  // browser code
}

Because typeof won’t try to evaluate «window», it will only try to get its type, in our case in Node.js: «undefined».

PS: Thanks to
Rogier Nitschelm for reminding me about this. I initially tried to do if (typeof window !== undefined) and this failed hard because of the reasons mentioned earlier.

The other solutions below are more exotic but still worth it.

2. Second solution: the useEffect hook

The «React» way to solve this issue would be to use the useEffect React hook. Which only runs at the rendering phase, so it won’t run on the server.

Let’s update our scroll.js component:

// components/Scroll.js

import React, { useEffect } from "react";

export default function Scroll() {
  useEffect(function mount() {
    function onScroll() {
      console.log("scroll!");
    }

    window.addEventListener("scroll", onScroll);

    return function unMount() {
      window.removeEventListener("scroll", onScroll);
    };
  });

  return null;
}

What we’ve done here is to turn our initial JavaScript file into a true React component that then needs to be added to your React tree via:

// pages/index.js

import Scroll from "../components/Scroll";

export default function Home() {
  return (
    <div style={{ minHeight: "1000px" }}>
      <h1>Home</h1>
      <Scroll />
    </div>
  );
}

Tip: The way we use useEffect in the example is to register and unregister the listeners on mount/unmount. But you could also just register on mount and ignore any other rendering event, to do so you would do this:

// components/Scroll.js

import React, { useEffect } from "react";

export default function Scroll() {
  useEffect(function onFirstMount() {
    function onScroll() {
      console.log("scroll!");
    }

    window.addEventListener("scroll", onScroll);
  }, []); // empty dependencies array means "run this once on first mount"

  return null;
}

3. Third solution: dynamic loading

A different solution is to load your Scroll component using dynamic imports and the srr: false option. This way your component won’t even be rendered on the server-side at all.

This solution works particularly well when you’re importing external modules depending on window. (Thanks Justin!)

// components/Scroll.js

function onScroll() {
  console.log("scroll!");
}

window.addEventListener("scroll", onScroll);

export default function Scroll() {
  return null;
}

// pages/index.js

import dynamic from "next/dynamic";

const Scroll = dynamic(
  () => {
    return import("../components/Scroll");
  },
  { ssr: false }
);

export default function Home() {
  return (
    <div style={{ minHeight: "1000px" }}>
      <h1>Home</h1>
      <Scroll />
    </div>
  );
}

If you do not need the features of useEffect, you can even remove its usage completely as shown here.

Finally, you could also load your Scroll component only in _app.js if what you’re trying to achieve is to globally load a component and forget about it (no more mount/unmount on page change).

I have used this technique to display a top level progress bar with NProgress in this article:

Sign Up for Our Newsletters

Get notified on the latest articles

By checking this box, you confirm that you have read and are agreeing to our terms of use regarding the storage of the data submitted through this form.

If you are working with Next.js and accessing the window object for the first time, there are high chances that you have seen the below error:

ReferenceError: window is not defined

In this article, we will see why this error occurs and different ways to fix the error.

Project setup

First, let’s create a Next.js application using the following command:

1npx create-next-app next-window-not-defined

Reproducing the error

Once the project is setup, update the index.js with the following code:

1import styles from "../styles/Home.module.css"
2
3export default function Home() {
4  window
.welcomeMessage = "Welcome to CodingDeft!"
5  return <div className={styles.container}>Hello</div>
6}

Here inside the Home component, we are setting a value to window.welcomeMessage.
In JavaScript applications or normal react applications, this should work fine.
But if we run the code and see we will see the following error:

Also, if you check the terminal where you have started the application, you will see the error there as well:

The root cause of the error

As you can see the error occurs in the terminal itself.
That means it is a compilation error.

Next.js is compiled/built on Node.js runtime and Node.js does not have the the window object.

Now you may ask, why it should run on Node.js?
This is because, Next.js is server-side rendered,
and it runs the component code in the server, sends the HTML to the browser, and the HTML gets hydrated in the browser.

Different ways of fixing the error

In this section, we will explore different ways how to fix the error

Checking if the window is defined

The very obvious fix would be to check if the window object exists or not, and access the window only if it exists.

1import styles from "../styles/Home.module.css"
2
3export default function Home() {
4  if (typeof window !== "undefined") {
5    window.welcomeMessage = "Welcome to CodingDeft!"
6  }
7  return <div className={styles.container}>Hello</div>
8}

Now if you run the code, you will not see the error.

Accessing the window inside useEffect

The useEffect hook does not run in the server side.
So we can have the code which needs to run only on the client-side inside a useEffect hook.

1import styles from "../styles/Home.module.css"
2
3export default function Home() {
4  useEffect(() => {
5    window.welcomeMessage = "Welcome to CodingDeft!"
6  }, [])
7
8
  return <div className={styles.container}>Hello</div>
9}

Dynamic imports in Next.js

Say you are accessing the window object in multiple places within your component,
and it would not be feasible to use the above methods all the time.

In cases where you want the whole component to be run only on the client side,
you can use the dynamic import
feature of Next.js

First, let’s create folder named components in the root of the project and a component named ClientComponent inside it:

1import React from "react"
2
3const ClientComponent = () => {
4  window.welcomeMessage = "Welcome to CodingDeft!"
5
6  return <div>Hello</div>
7}
8
9export default ClientComponent

Now we can import the ClientComponent dynamically as shown below:

1import styles from "../styles/Home.module.css"
2
3import dynamic from "next/dynamic"
4
5const ClientComponent = dynamic(() => import("../components/ClientComponent"), {
6  
7  ssr: false,
8})
9
10export default function Home() {
11  return (
12    <div className={styles.container}>
13      <ClientComponent />
14    </div>
15  )
16}

Now if you run the code, you will not see the error.

If you have liked article, do follow me on twitter to get more real time updates!

JavaScript is a programming language with the sole purpose of allowing developers to add interactivity to web pages. At least, that was its sole purpose. Until Node.js came out. That brought JavaScript out from under the hood of the client and into the world of servers and other non-browser based programming applications.

Since its original purpose was to provide functionality for client-side development, JavaScript was built with many useful features that are only useful when working within a browser. Now that JavaScript is used just about everywhere, some care needs to be taken to ensure that you are not trying to do something browser specific while not in a browser environment.

The Problem

It is not uncommon to want or need to access the window global object from your JavaScript code. For example, you may be trying to access a web page’s innerWidth or innerHeight from the window object. Whatever the case may be, in some situations you might find yourself confronted by a message in your console: ReferenceError: window is not defined

There could be a few different reasons why this is happening, but the cause is all the same: you are attempting to access window from a Node.js environment. This is a common error if you are:

1. Simply looking for a global variable to use in your Node.js app
2. Building an app that uses server-side rendering (SSR) or static site generation (SSG) with frameworks such as Gatsby.js, Nuxt.js, or Next.js. You may think that you are writing frontend code so the window object is available but the code is actually being run on the server first which causes the error, typically at build time.

The Solution

Fixing a window is not defined error can be quite simple. In most cases, all you will need to do is wrap your window associated code in logic to make sure it is only used on the client. For example, let’s say you want to get a page’s width and height:

let width = 0, height = 0;

width = window.innerWidth;
height = window.innerHeight;

Wrap this code in a check to see make sure window is defined and that error will no longer be a problem.

if (typeof window !== «undefined») {
width = window.innerWidth;
height = window.innerHeight;
}

console.log(width); // 0 if on the server, window width if on the client
console.log(height); // 0 if on the server, window height if on the client

If you are specifically working on a Node.js application and still receive this error, it is because the window object does not actually exist in a Node.js environment. To resolve this, all you would need to do is swap out your usage of window with the globalThis object. This object essentially performs the same role in Node.js that window plays while working directly with a web page: it gives you access to a global variable (among other things of course).

window.foo = «bar»; // replace this
globalThis.foo = «bar»; // with this

It’s worth mentioning that you could also reevaluate if you truly need a global object like globalThis or window in your Node.js application. You could avoid the problem altogether by defining your variable in one module and importing it wherever you need it.

// foo.js
const foo = «bar»;

module.exports = {
foo,
};

// needsFoo.js
const { foo } = require(«./foo»);

console.log(foo); // ‘bar’

Or, if you prefer the ES6+ method:

// ES6+
// foo.js
export const foo = «bar»;

// needsFoo.js
import { foo } from «./foo.js»;
console.log(foo); // ‘bar’

Between both solutions you should now be enjoying a programming experience without any window is not defined errors. If a new error comes up feel free to check out our archive for a solution or leave a comment if we haven’t covered it yet. Thanks for reading!