ReferenceError: window is not defined on NextJS Build

[dinkydodouk]

I have come across an issue when compiling NextJS into a published build. When you compile using next build, it comes up with an issue ReferenceError: window is not defined.

I have worked out a fix for this which would be useful for those using the Next JS Framework. Is there a way to add this to your code?

[jsfour]

Our builds stopped working on Gatsby as well. This looks like its due to the new version. We were able to fix by fixing the version to 1.2.6:

-    "react-modal-video": "^1.2.6",
+    "react-modal-video": "1.2.6",

[kik-o]

Our builds stopped working on Gatsby as well. This looks like its due to the new version. We were able to fix by fixing the version to 1.2.6:

-    "react-modal-video": "^1.2.6",
+    "react-modal-video": "1.2.6",

@jsfour Solution worked in getting rid of the error. Sadly, theme went out the window and doesn't pop in as a modal but as any other block module. No chance you had to create some style overrides, right?

[waterlooblue]

In Gatsby we use a browser check for anything with window for server side rendering. const isBrowser = () => typeof window !== 'undefined';

[iyonaga]

In my Next app, I used dynamic import to get around this issue.

import dynamic from 'next/dynamic';
const ModalVideo = dynamic(() => import('react-modal-video'), { ssr: false });

[caprica-Six]

Having the same issue with Next app, just updated the package to: react-modal-video": "^1.2.8 and used dynamic import.

Worked like a charm, thanks @iyonaga

[uidev1116]

Closing due to comments above. Thanks!!