ReferenceError: document is not defined

[cdnbelgium]

Love how you have come up with this solution to the problem of adding to home screen with IOS devices. I guess Apple really does not like the PWA as they could potentially be taking away that cash cow of revenue from their app store. But I am having a slight issue with it. Go easy on me. Newbee ;)

I am using this in a Next project.

npm i react-ios-pwa-prompt

then

import PWAPrompt from 'react-ios-pwa-prompt'

then put it in with my index,js code

     '<PWAPrompt />'

the '' are only there to show what I had coded...it would not show up in query otherwise.
getting this in response:

Server Error
ReferenceError: document is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
s
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:2222)
v
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:3463)
l
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:2161)
e.exports
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:3795)
Object.
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1410)
r
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:432)
Module.
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:12225)
r
file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:432)

file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1237)

file:///C:/Users/jscha/Desktop/swim/node_modules/react-ios-pwa-prompt/dist/react-ios-pwa-prompt.js (1:1246)

Any advice?

Cheers Joel

[jpalo]

Try loading this component using loadable-components https://github.com/gregberge/loadable-components to overcome the SSR issue you're probably experiencing.

import loadable from '@loadable/component'
const PWAPrompt = loadable(() => import("react-ios-pwa-prompt"))

[chidera-ugo]

Import it dynamically and disable SSR

const PWAPrompt = dynamic(() => import('react-ios-pwa-prompt'), { ssr: false, });