[Bug]: NextJS window is not defined

[KDederichs]

What happened?

After updating to 3.0.0 on NextJS I get this error:

- error node_modules/.pnpm/react-onesignal@3.0.0_react@18.2.0/node_modules/react-onesignal/dist/index.js (11:0) @ eval
- error ReferenceError: window is not defined
    at __webpack_require__ (<REPLACED>/.next/server/webpack-runtime.js:33:43)
    at eval (./utils/webPush.ts:9:73)
    at (ssr)/./utils/webPush.ts (<REPLACED>/.next/server/app/user/settings/page.js:11088:1)
    at __webpack_require__ (<REPLACED>/.next/server/webpack-runtime.js:33:43)
    at eval (./app/user/layout.tsx:36:73)
    at (ssr)/./app/user/layout.tsx (<REPLACED>/.next/server/app/user/settings/page.js:7380:1)
    at __webpack_require__ (<REPLACED>/next/server/webpack-runtime.js:33:43)

What browsers are you seeing the problem on?

Firefox, Chrome (Chromium), Safari

What operating system are you running?

OSX 13.4

Steps to reproduce?

Install react-onesignal in a NextJS v13 project

What did you expect to happen?

No errors

Relevant log output

No response

[alepell]

same here, anyone to help?

[ggambini99]

same here, still no resolution 👎

@jkasten2 can u help us?

[RalphKemp]

Same here.

[aghuber11]

Hi there,

I had this exact error happen to us when attempting to deploy our build this morning.

I was able to resolve the error by modifying the following line in /node_modules/react-onesignal/dist/index.js

if (window) {
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    addSDKScript();
}

Changed to:

if (typeof window === "object") {
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    addSDKScript();
}

Happy programming!

[Axl-Lvy]

Hi there,

I had this exact error happen to us when attempting to deploy our build this morning.

I was able to resolve the error by modifying the following line in /node_modules/react-onesignal/dist/index.js

if (window) {
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    addSDKScript();
}

Changed to:

if (typeof window === "object") {
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    addSDKScript();
}

Happy programming!

It does not seem to solve the issue here... Is there a specific way to modify the file ? I feel that my changes on /node_modules/react-onesignal/dist/index.js don't have any effect

[aghuber11]

@Axl-Lvy 👋 ,

I didn't really do anything too special, just changed the line above to check if the window obj is present instead of just window and recompiled and it resolved the problem.

For us, we were just getting ReferenceError: window is not defined when deploying a build. After i made the changes and recompiled it fixed it.

This is really more of a hot fix until the Onesignal team takes a looksie 👀.

[RalphKemp]

Yeh I'm currently doing dynamic imports as a workaround, for example

 const login = async (username: string) => {
    if (typeof window !== "undefined") {
      try {
        const OS = await import("react-onesignal");
        const one_signal = OS.default;
        return await one_signal.login(username);
      } catch (error) {
        console.log(error);
      }
    }
  };

Or if you need to use the library in components directly you can always do dynamic imports of the components so they're not rendered on server (unless you need them to be)

const NotificationsToggle = dynamic(
  () => import("features/account/components/NotificationsToggle"),
  {
    ssr: false
  }
);

etc.

[rgomezp]

Fixed in 3.0.1

[RalphKemp]

Fixed in 3.0.1

Thanks for the fix! Will try that out tomorrow