Next-pwa: `/_offline` not shown when offline

[maximousblk]

Summary

When offline, the cached pages work fine but when you visit an new (uncached) page, the /_offline page doesn't show up, instead the default chrome error page is shown.

Versions

• next-pwa: ^5.2.15
• next: ^10.2.0

How To Reproduce

Steps to reproduce the behavior:

1. Go to https://maximousblk-git-offline-maximousblk.vercel.app
2. let the service register
3. go offline (dev tools > application > service workers > offline)
4. go to a page that wasn't cached on the first load (/posts/deno-for-javascript-beginners)

source code at https://github.com/maximousblk/maximousblk.now.sh/pull/59
deployment at https://maximousblk-git-offline-maximousblk.vercel.app

Expected Behavior

Should show the custom offline page

Actual Behavior

Shows Google Chrome's default offline page

Additional Context

n/a

[dryleaf]

Any updates on this issue?

[shadowwalker]

Upgrade to 5.2.16

@maximousblk You can try these routes when offline to see if the issue is fixed: /abc and /abc/def. The /abc route got captured by your pages/[slug].tsx route, so it rendered through mdx instead. The /abc/def should fallback to your /_offline page

[maximousblk]

It's acting super weird now. It randomly selects an error page from /_offline, /_error or <p>Oops! No Internet Connection</p> and adds the whole page below the current page. (video)

console errors:

a bunch of times this:

TypeError: Cannot read property 'text' of undefined
    at y [as constructor] ([slug]-8bfa6923592137459b51.js?__WB_REVISION__=JOMtlp4Jq62YwzwB9pOkC:1)
    at y.D [as render] (commons-e1abd7d9af575ea860bc.js:1)
    at A (commons-e1abd7d9af575ea860bc.js:1)
    at x (commons-e1abd7d9af575ea860bc.js:1)
    at A (commons-e1abd7d9af575ea860bc.js:1)
    at x (commons-e1abd7d9af575ea860bc.js:1)
    at A (commons-e1abd7d9af575ea860bc.js:1)
    at x (commons-e1abd7d9af575ea860bc.js:1)
    at A (commons-e1abd7d9af575ea860bc.js:1)
    at x (commons-e1abd7d9af575ea860bc.js:1)

and then this:

Uncaught (in promise) Error: Cancel rendering route
    at $ (main-8b942657d68a81710233.js:1)
    at main-8b942657d68a81710233.js:1
    at new Promise (<anonymous>)
    at ye (main-8b942657d68a81710233.js:1)
    at main-8b942657d68a81710233.js:1

[vitorcamachoo]

Im getting the following error when I add a page _offline.tsx on the building process for production:
Cannot read property 'javascript' of undefined

[maximousblk]

@vitorcamachoo you need to enable webpack 5.

adds this to your nextjs config:

future: {
  webpack5: true,
},

[shadowwalker]

@maximousblk Here you go: https://github.com/maximousblk/maximousblk.now.sh/pull/61

[maximousblk]

https://github.com/maximousblk/maximousblk.now.sh/pull/61

while, that's one way to do it, the issue with that is I'm eventually going to remove the /data directory and move all the content to notion (waiting on the official api). So I was hoping I could keep all the website files in tsx and the actual content in mdx + json (for easy importing). so yeah the /_offline page needs to be in tsx. going with workaround != solution, I would still consider this issue not fixed.

also,
I just upgrade to [email protected], it does this, so broke even further: