Routes with `getStaticProps` result in client side error screen when offline

[joshuawootonn]

Summary

Pages that use getStaticProps have a runtime error on the offline page. If — after I have the runtime error — I refresh then I correctly hit the offline page.

Note (I noticed that refreshing showed the offline page because when testing Next 13 it "didn't have this problem." But actually it was just hard refreshing because of the client side error.

Versions

• next-pwa: 5.6.0
• next: 12.3.1

Note: I have tested 12.2 locally and it has the same behavior as 12.3 Note2: I have tested 13 and it automatically reloaded for me. So I never saw the client error screen.

How To Reproduce

I created this demo of me encountering the error in a minimal reproduction I made by extending the v2 offline demo:

Steps to reproduce the behavior:

1. Go to https://next-pwa-eta-azure.vercel.app/
2. Click on Page 1
3. Click on any of the links that use getStaticProps
4. See client side error

Here is my minimal reproduction: https://github.com/joshuawootonn/next-pwa

The repro was made by

1. forking the repo
2. c/p'ing "offline-fallback-v2" into "offline-fallback-v2-with-getStaticProps-and-getStaticPaths-12.2"
3. and then adding routes to the new example

Expected Behaviors

I would expect these pages to not throw a client side error. Any info into what is happening would be lovely

[joshuawootonn]

This could be the problem with: https://github.com/shadowwalker/next-pwa/issues/379

[smultar]

This could be the problem with: https://github.com/shadowwalker/next-pwa/issues/379

This very well is the problem experienced in that issue.

[shadowwalker]

This is an interesting edge case, unfortunately there is no way to get routes and SSG pages info within webpack config during client side build. I was trying to get some work around solution. I got it mostly working, but still having some issues.

[joshuawootonn]

This is an interesting edge case, unfortunately there is no way to get routes and SSG pages info within webpack config during client side build. I was trying to get some work around solution. I got it mostly working, but still having some issues.

Thanks for taking a look / trying to figure it out. Is there a feature branch or any artifacts of the work you did? I am happy to contribute, but I might need a point in the right direction :)

[dohomi]

I am seeing the same error with dynamic routes except that I am using getServerSideProps instead of SSG pages

[safoine27]

Any updates on this? I am also experiencing the same issue using getServerSideProps and I couldn't find any workaround for this

[ltndat]

Any updates on this? I am also experiencing the same issue using getServerSideProps and I couldn't find any workaround for this

I have at same issues with getServerSideProps. I try console.log in getServerSideProps function, it's have props data. But in the function component page/*.js it wasn't received.

It's not have solution for this case?

[ltndat]

I just found solution for this case. In the next.config.js file. You just need pass navigateFallback options to any not falsy, then you can navigate in your page by next/link. But i get bug with workbox.