Error - The FetchEvent resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

[TheMrZZ]

Summary

When loading my website for the 1st time, everything is just fine. Then, when going back a 2nd time on the website, using the same browser, I've got this warning happening in the console:

The FetchEvent for "https://www.mywebsite.com/" resulted in a network error response: a redirected response was used for a request whose redirect mode is not "follow".

My website redirects people from the index to another route, that I will call /other. The problem happens when going to the index, but when going directly to /other, everything works fine.

Chrome shows the following message: (Basically, the website isn't accessible)

And Firefox this one:

The website can still be accessed by refreshing without cache (Ctrl+F5).

It looks like the service worker fails to follow the server redirects.

How To Reproduce

Steps to reproduce the behavior:

1. Create a a NextJS website, using next-pwa. Ensure you have both an index & a /other page. In your next.config.js, add a redirection:

async redirects() {
    return [
      {
        source: '/',
        permanent: false,
        destination: '/other',
      },
  },

2. Visite your website, using the index URL.
3. Wait a bit to ensure the service worker is correctly working
4. Close the browser, open it again
5. Manually type the entire exact URL to your website's index. It should not work.

Link to minimal reproduce setup repository if any.

Expected Behaviors

It should follow the redirection properly.

[shadowwalker]

What's the version of next-pwa are you using, could you upgrade to latest version and try again?