Vincent Voyer

Posted on Jun 10, 2020 • Updated on Sep 28, 2020

How to solve "window is not defined" errors in React and Next.js

#javascript #nextjs #errors #debugging

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:

Use NProgress with Next.js (Router and fetch events)

Vincent Voyer ・ Jun 9 '20 ・ 2 min read

#javascript #nprogress #nextjs #fetch

Top comments (34)

Rowin Mol • Jun 10 '20 • Edited

Niceee!

If you don't want to have a lot of boilerplate code, you could simple write:

const isBrowser = window && window.addEventListener(.......blabla)

and use this variable as a conditional.

Also if you use the first option, please remember to unsubscribe your eventListener in the useEffect or you gonna have a bad time 😭 .

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

    window.addEventListener("scroll", onScroll);

   return () => {
      window.removeEventListener("scroll");
    }
  }, []);

Vincent Voyer • Jun 10 '20 • Edited

Hey there Rowin, you might have a different setup but const isBrowser = window won't work at least in Next.js pre-rendering. You'll get the same error (just tried it again). I think anytime such code would go through Node.js it would fail, as shown in a REPL:

> node
Welcome to Node.js v12.18.0.
Type ".help" for more information.
> window && "ok"
Uncaught ReferenceError: window is not defined

As for unsubscribing the listener, this is already done in the code samples from the article so maybe you missed that or there's some other place I forgot to do it?

Thanks

Rogier Nitschelm • Jun 10 '20

Perhaps like this?

const isBrowser = () => typeof window !== "undefined"

// node
isBrowser() // false

// browser
isBrowser() // true

Vincent Voyer • Jun 11 '20

Yes that would work indeed! Thanks :)

Vincent Voyer • Jun 12 '20

Just added a new solution and thank you note :)

ARiyou Jahan • Dec 8 '22

In a tread related to this problem in Next.JS official GitHub issue page mentioned that it is wrong to do so and you need to explicitly check typeof window !== "undefined" wherever you need it:
NextJS GitHub issues page

Consider reading my solution as well. it's inspirred by this post. So thank you Vincent for idea.
NextJS - Access window and localStorage

clxrity • Apr 18

I found this only works (2024) when adding window to the dependency array.

Justin Sunseri • Sep 18 '20

none of these solutions work well if the problem is in a library you are using

Vincent Voyer • Sep 18 '20

Definitely right. When that's the case I am not sure if there's even a solution. Do you know one? If the library tries to read directly from the window object, then it just isn't compatible with Node.js (even if it could I guess).

Maybe you can do something like global.window = {} and provide the necessary code? Let us know!

Justin Sunseri • Sep 18 '20

My solution was to import the component that used the library that used window using the dynamic importer

import dynamic from 'next/dynamic';
...
const Standings = dynamic(() => import('../components/Standings/Standings'), {
  ssr: false,
});

Vincent Voyer • Sep 19 '20

Thanks, if I am not mistaken, that's the third solution of this current blog post: dev.to/vvo/how-to-solve-window-is-...

Justin Sunseri • Sep 19 '20

I feel silly now.

Alan Smith • Sep 25 '20

Lol!!

Vincent Voyer • Sep 28 '20

Hey Justin, don't, because I am updating the article right now to add that this particular solution works well for libraries you're importing :) Thanks for the tip!

JoelBonetR 🥇 • Sep 15 '21 • Edited

As a good practice, I would suggest to convert this into a customHook like that:

import { useEffect } from 'react';

export default function useScroll(callback) {
  useEffect(function mount() {
    function onScroll() {
      const scrollPosition = window.scrollY;
      callback(scrollPosition);
    }

    window.addEventListener('scroll', onScroll);

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

  return null;
}

so you can use it in multiple places like:

import useScroll from '../customHooks/useScroll';

export default function whatever() {

  useScroll( (val) => { 
     // add any logic with val
  });

  // component logic
  return (  {/*component structure*/} );

This is just an example, it can be extended adding an "element" parameter and some logic for it in the hook so you can get the scroll position of any element and get back the value to do something with it in the callback.

This avoid the need of creating different functions that performs almost the same actions and it's more in line with what hooks are (high order functions).

Uduak Essien • Mar 27 '22

Even better

PoloBustillo • Jan 24 '21

Nice work
I was struggling a little with adding a function that is not a default export to run with SSR false, maybe this could be helpful for someone:

import dynamic from 'next/dynamic'

const DynamicComponent = dynamic(() =>
import('../components/hello').then((mod) => mod.Hello)
)

Musiur Alam Opu • Jan 1 '22 • Edited

Thanks a lot ...

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

this one works for me....

I wanted to redirect to other page using window.location.replace....but several times it threw the error that window is not defined....Basically in HOC there was a class component and inside the render block before the returnning the Original component I wanted to check if a variable is true or not....Hence I made a condition which will redirect to other page if variable is false....

Thanks again!

Rahul Sapkota • Nov 12 '22

Hello,
I am trying to convert html template into reactjs component in reactjs app. I am injecting the js required like this shown in below image.

the js file contains initialization and method invoke as shown in below image.

and i am getting error like this as shown below image, how do i fix it or rather a good way how it's done so i can use every plugin mentioned in this file without error. please help me on this.

MD Anwar • Jan 30 '23 • Edited

Thanks alot, 3rd solution worked for me, i am new in next js and used the reactjs-social-login npm dependency.
And were having a page map to the login in single page but whenever i tried to refresh page it was throwing "Window is not defined" so i just copied social login button and dependencies and created new functional component and dynamically imported in parent login page and it's working fine.