Uncaught (in promise) TypeError: Failed to fetch Nextjs PWA using next-pwa in Chrome

[jpbmdev]

Hi I was working on a Nextjs proyect and i try to convert it to a PWA using next-pwa, first i created the next.config.js

then created the manifest.json

{ "name": "PRONTO APP", "short_name": "PRONTO", "icons": [ { "src": "/icon.png", "sizes": "128x128", "type": "image/png" }, { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" } ], "theme_color": "#FFFFFF", "background_color": "#FFFFFF", "start_url": "/", "display": "standalone", "orientation": "portrait" }

And I add the meta data in de _document file in pages

But when i run:

npm build dev npm start

in Google Chrome My PWA works fine but in console i get this error, in other browsers this error doesn't appear:

And I really dont know why, running the app in dev mod with npm run dev i get the following messages in chrome:

This is my public folder structure:

I was trying to do the same thing in this video. https://www.youtube.com/watch?v=8enp-acPbRE

Can Anyone Help me plss

[OMMatte]

Hello! I have the same problem. Googled a bit and these links might help to fix it: https://github.com/shadowwalker/next-pwa/issues/160 https://github.com/paulirish/caltrainschedule.io/pull/51/commits/82d03d9c4468681421321db571d978d6adea45a7

[OMMatte]

The error I'm getting is this:

But perhaps the fix, that I linked to in the prev post, must come through workbox-webpack-plugin?

[peter-writes-code]

I'm experiencing the same issue 'out of the box'. Only in chrome. It's perfectly fine in Safari.

[DenVilden]

i noticed its happening since chrome 89

[bduff9]

I have the same issue and was just coming here to report. I did a little bit of digging since seeing this issue, and found for me this happens in Chrome, even with all my extensions disabled. HOWEVER, it does not happen in Incognito at all. It seems Incognito does not have the app install features or anything, and the Failed to fetch error for me seems to be coming from the manifest.json's start URL property, so maybe that is why. But I also have a very vanilla setup, my entire config is below:

const withPWA = require('next-pwa');

module.exports = withPWA({
    pwa: {
        dest: 'public',
        disable: process.env.NEXT_PUBLIC_ENV === 'development',
    },
});

[TheMrZZ]

Same here, however I've got 2 errors:

Uncaught (in promise) no-response: no-response :: [{"url":"https://myurl.com"}]
    at Object.I (https://myurl.com/workbox-a8b10d99.js:1:19214)
    at async Object.A (https://myurl.com/workbox-a8b10d99.js:1:11362)
s @ workbox-a8b10d99.js:1
I @ workbox-a8b10d99.js:1

workbox-a8b10d99.js:1 Uncaught (in promise) TypeError: Failed to fetch
  async function (async)
S @ workbox-a8b10d99.js:1
handleAll @ workbox-a8b10d99.js:1
handle @ workbox-a8b10d99.js:1
handleRequest @ workbox-a8b10d99.js:1
(anonymous) @ workbox-a8b10d99.js:1

Failed to fetch & no-response.

[Moorst]

I'm getting the exact same issue @TheMrZZ

[webmaxru]

This entry [{"url":"https://myurl.com"}] looks strange - what's the reason to put absolute URL to precacheAndRoute precache list?

Could it be related with the fact that Workbox is looking for index.html? From the docs: Requests ending in a / will, by default, be matched against entries with an index.html appended to the end. This means an incoming request for / can automatically be handled with the precached entry /index.html. https://developers.google.com/web/tools/workbox/modules/workbox-precaching#directory_index

I kindly ask @jeffposnick to have a look at this issue - maybe he has some ideas?

[jeffposnick]

Hey all—there's some more background on this issue in https://github.com/GoogleChrome/workbox/issues/2749

The latest Workbox v6.1.2 release has some mitigations in place to remove the uncaught exception.

The underlying trigger is the behavior described in this article, which was implemented in Chrome 89. Unfortunately, Chrome's DevTools don't currently give much of a clue to developers as to what's going on, and the fact that the phantom failed network request is actually "normal" due to this automated check.

The team working on both PWAs and DevTools at Chrome are aware that this is causing developer confusion, and expect for some announcements to be appended to that original article in the near future talking about how it's going to be addressed.

[TheMrZZ]

Thanks for the explanation! @shadowwalker , any chance on seeing Workbox 6.1.2 soon integrated into Next PWA?

[shadowwalker]

@TheMrZZ I'm working on it.

[shadowwalker]

@jeffposnick What is the proper solution for folks using GenerateSW webpack plugin?

[shadowwalker]

Update, this should be mitigated in next-pwa 5.1.3. Though there is still an error in network tab, but it's expected. No error logging in console now.

[bduff9]

Update, this should be mitigated in next-pwa 5.1.3. Though there is still an error in network tab, but it's expected. No error logging in console now.

@shadowwalker Just curious, as I think I will still have issues with this new check Chrome does until users are signed in as the start_url is not accessible until authentication. What would be the best way to get around this? Or put another way, do you have any resources for how I would customize this fetch check with next-pwa?

I do see this example, but am unclear on how to adapt this to fix this new check: https://github.com/shadowwalker/next-pwa/tree/master/examples/offline-fallback

Any thoughts would be appreciated here

[shadowwalker]

start_url is not accessible until authentication

@bduff9 When the user first visit your start_url does it return some page or HTML document? even through redirect will work.

I will be working on a new feature to fallback to _error page or configurable page.

[bduff9]

@bduff9 When the user first visit your start_url does it return some page or HTML document? even through redirect will work.

I will be working on a new feature to fallback to _error page or configurable page.

Yes, my start_url is the index page (/). I have a server-side 301 redirect on this page to /auth/login when not signed in. When I run this in Chrome, I am getting a message that this cannot be installed. This message seems to go away after sign-in, which is why I am thinking this new check will prevent my app from being installed.

The FetchEvent for "https://....com/" resulted in a network error response: an "opaqueredirect" type response was used for a request whose redirect mode is not "manual".
Uncaught (in promise) TypeError: Failed to fetch
Site cannot be installed: Page does not work offline. Starting in Chrome 93, the installability criteria is changing, and this site will not be installable. See https://goo.gle/improved-pwa-offline-detection for more information.

[tonyvugithub]

@shadowwalker : Hi, I updated to v5.1.3 this morning since I was having an issue of next-pwa not working in prod. However, I still got the same uncaught promise error as in below screenshot. Could this be something relating the Chrome issue mentioned above or something about next-pwa. Here is my next.config.js. I am using it with next-compose-plugins. It worked perfectly in dev and I can install but not in prod, I did not see the install option. Please let me know if you can. Thank you very much!

module.exports = withPlugins([
  [withMDX],
  [
    withPWA,
    {
      pwa: {
        disable: process.env.NODE_ENV === 'development',
        register: true,
        dest: 'public',
        runtimeCaching,
      },
    },
  ],
  {
    pageExtensions: ['ts', 'tsx', 'md', 'mdx'],
    poweredByHeader: false,
    reactStrictMode: true,
    trailingSlash: true,
    future: {
      webpack5: true,
    },
  },
]);

[shadowwalker]

@tonyvugithub It seems you have a googlee1d86717a49db532.html file in your public folder during the build of the app. I can add following to your pwa config to avoid it if that's not needed:

publicExcludes: ['!google*.html']

Link I trouble shooted

[Bayezid1989]

Hi, I'm using "next-pwa": "^5.1.4" and I got the same error when deploying to vercel, though it's working fine with no error at localhost. I don't have _error.js in my app, so should I exclude _error.js like publicExcludes: ["!_error*.js"], ? I tried to add _error.js in my app but it still gave the same error. My next config is same as basic usage.

const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
    publicExcludes: ["!_error*.js"],
  },
});

[rodgrolop]

Getting same error as @Bayezid1989 but in my case is 403

[rodgrolop]

@Bayezid1989 I added a blank page on /_error on my cloudfront to make it work until we have more info, and is working so far

[shadowwalker]

@rodgrolop and @Bayezid1989 try version 5.2.0

[Bayezid1989]

@shadowwalker @rodgrolop It worked perfectly! Thank you so much.

[rodgrolop]

Yeah, works perfectly, thank you man

[malikarami]

I still have this problem, the version is ^5.2.24. I get this error all the time, mostly for fetching the chunks, but most frequently i have faced this error in fetching the api calls.