[Next.js + Capacitor] ReferenceError: window is not defined

[itemsCenter]

Description:

Hello guys. I've been trying to fix this issue for over 2 hours now but no luck. I have a Next.js + Capacitor project and every time I try to init OneSignal I'm getting a window is not defined error on building. This might be caused by Next.js since it doesn't have access to window property in external ts file. However I tried init OneSignal even in useEffect hook with window property available but unfortunately it didn't seem to work. Appreciate any possible help.

I've done everything as described in the Capacitor & Cordova Docs.

Environment

Screenshots

[jkasten2]

@220ish Thanks for reporting. Could you provide a step-by-step reproducing the issue we can follow with a new Next.js + Capacitor project? Or if possible could you provide a Github repo reproducing the issue we can quickly test with?

[kiliw]

Same for me. I also use NextJs and followed the instructions but when I want to build the project I get a similar error stating that window is not defined. This is my ini according to the docs of one signal. I placed it in the _app.tsx I did the same with the onesignal-react plugin and it worked fine. Unfortunately for the capacitor app with the corresponding plugin I get the error during the build.

@jkasten2 here is a demo repo with a basic setup. Follow these steps to reproduce:

1. checkout https://github.com/kiliw/oneSignalDemo
2. run yarn to install deps
3. run yarn build

This will result in the following error. You get the same error buy running yarn dev

I hope this information helps. Would be great to have a fix for this.

[kiliw]

Found a workaround. Not so pretty, but working at least.

// _app.tsx

useEffect(() => {
        import('onesignal-cordova-plugin')
            .then((x) => x.default)
            .then((OneSignal) => {
                // Uncomment to set OneSignal device logging to VERBOSE
                OneSignal.setLogLevel(6, 0)
                // NOTE: Update the setAppId value below with your OneSignal AppId.

                OneSignal.setAppId('MY_APP_ID')
                OneSignal.setNotificationOpenedHandler(function (jsonData) {
                    console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData))
                })
                // iOS - Prompts the user for notification permissions.
                //    * Since this shows a generic native prompt, we recommend instead using an In-App Message to prompt for notification permission (See step 6) to better communicate to your users what notifications they will get.
                OneSignal.promptForPushNotificationsWithUserResponse(function (accepted) {
                    console.log('User accepted notifications: ' + accepted)
                })
            })
    }, [])

[AbdullahKhan780]

Found a workaround. Not so pretty, but working at least.

// _app.tsx

useEffect(() => {
        import('onesignal-cordova-plugin')
            .then((x) => x.default)
            .then((OneSignal) => {
                // Uncomment to set OneSignal device logging to VERBOSE
                OneSignal.setLogLevel(6, 0)
                // NOTE: Update the setAppId value below with your OneSignal AppId.

                OneSignal.setAppId('MY_APP_ID')
                OneSignal.setNotificationOpenedHandler(function (jsonData) {
                    console.log('notificationOpenedCallback: ' + JSON.stringify(jsonData))
                })
                // iOS - Prompts the user for notification permissions.
                //    * Since this shows a generic native prompt, we recommend instead using an In-App Message to prompt for notification permission (See step 6) to better communicate to your users what notifications they will get.
                OneSignal.promptForPushNotificationsWithUserResponse(function (accepted) {
                    console.log('User accepted notifications: ' + accepted)
                })
            })
    }, [])

Thanks for sharing it. The issue has been fixed on Android but Ios is still giving the error window["OneSignal"].push is undefined.