DEV Community

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

Collapse
 
jmsunseri profile image
Justin Sunseri

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

Collapse
 
vvo profile image
Vincent Voyer

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!

Collapse
 
jmsunseri profile image
Justin Sunseri

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,
});
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
vvo profile image
Vincent Voyer

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

Thread Thread
 
jmsunseri profile image
Justin Sunseri

I feel silly now.

Thread Thread
 
alsmith808 profile image
Alan Smith

Lol!!

Thread Thread
 
vvo profile image
Vincent Voyer

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!