Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work with SSR

See original GitHub issue

I get a “ReferenceError: window is not defined” when I try to import PWAPrompt from 'react-ios-pwa-prompt';

I believe this an issue with SSR in next.js. Is it possible to execute deviceCheck() after the component has been mounted?


Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

chrisdanceecommented, Feb 20, 2020

Hi @shih-js,

Apologies for leaving this so long, managed to grab some time this weekend. This probably isn’t of any use to you anymore tbh, but in the latest version I’ve changed the Webpack target to Node. This doesn’t allow SSR per se, but will allow dynamic importing within NextJS to load the component on the client only.

Based on the repo you posted, I did the following:

import React from "react";
import dynamic from "next/dynamic";

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

class HomePage extends React.Component {
  render() {
    return (
        <span>Hello from Canada</span>
        <PWAPrompt timesToShow={50} permanentlyHideOnDismiss={false} />

export default HomePage;
kellenmacecommented, Jul 16, 2020

For anyone coming across this thread, I ended up using React.lazy in my Gatsby app to lazily load this library on the client-side only, so it wouldn’t affect SSR. Example:

import React, { Suspense } from "react"

const PWAPrompt = React.lazy(() => import("react-ios-pwa-prompt"))

function PWAInstallPrompt() {
  return (
    <Suspense fallback={null}>

export default PWAInstallPrompt

Then you can render the <PWAInstallPrompt /> component anywhere in your app.

Note that as of the date of the this comment, the React Suspense API is still ‘experimental’.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Next js app with SSR is not pre-rendering HTML, so web ...
Within the auth context file, I was performing conditional rendering, depending on a loading state, which was causing SSR not to take place:....
Read more >
Does not work with SSR · Issue #217 · tajo/react-portal - GitHub
When running this code with SSR I am seeing this: Invariant Violation: Portals are not currently │ supported by the server renderer.
Read more >
How to Disable Server-Side Rendering (SSR) in Next.js
Step 1: Rewrite All Requests to pages/index.js · Step 2: Disable SSR for Page Content · Step 3: Check that Everything Works with...
Read more >
Inertia SSR does not work - Laracasts
I have setup new Laravel project with Breeze package + Inertia SSR support php artisan breeze:install vue --ssr I do everything according Inertia...
Read more >
Server-side rendering (SSR) with Angular Universal
This guide describes Angular Universal, a technology that renders Angular applications on the server. A normal Angular application executes in the browser, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found