DEV Community

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

Vincent Voyer on June 10, 2020

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 be...

Read full post

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!

okumujustine • Jul 19 '21

so helpful👏

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.

Uduak Essien • Mar 27 '22

Thank you so much, the second solution worked perfectly for me

Sohanur Rahman Emon • May 15 '22

It really helpful.

TahiJameel • Feb 4 '22

Thanks for this helpful article

truongdinh2 • May 17 '21

thank you, but I only want show model when scroll. It seems re-render so many.

Dr. Derek Austin 🥳 • Apr 29 '21

Love it, thanks! I didn't know about the Next.js dynamic importer, but that's great for cases like this. 💯

Beulah Sheeba • Feb 23 '21

Hi How can I solve this in react js with out next?

Vincent Voyer • Feb 23 '21

The blog post has Next.js in it but really all techniques (but the dynamic loading one) will work everywhere, so try them and let us know

copperfox777 • Jan 25 '21

Good article!

bl4ckck • Jan 20 '21

how to load variable?

example:

var myVar = "bla"

When I use dynamic loading, it returns ReferenceError: window is not defined

Rishi58 • Aug 26 '21

Thanks 👍

Osama-D • May 5 '22

i had to create an account to say Thank you So much the third solution saved my day ^^

natashajaved • Mar 9 '21 • Edited

What if I want to find geolocation using navigator object in getStaticProps and make api request on that basis and use the response to fill data in pre rendering. Need to do this for SEO

Theo Tran • Nov 16 '22

For anyone still dealing with this issue, I used the isBrowser check along with Reacts lazy module to lazyload the import and Suspense wrapped the component being rendered.