GenerateSW has been called multiple times

[adammesa]

Hello, I recently setup next-pwa on by next.js app, and when using running in development next dev, every new page load (for that development session) will see GenerateSW being called again. This ends up being annoying as it causes lag on page navigation, is disruptive in the console, and causes a new sw.js to be generated all the time, even though no changes have been made (I don't even have a custom serviceworker setup right now at all.

On the live app (Hosted & compiled by vercel/ZEIT), no GenerateSW error appears in the console. I'm running next.js ^9.3.3 and next-pwa ^2.4.0.

The error message reads: [ warn ] GenerateSW has been called multiple times, perhaps due to running webpack in --watch mode. The precache manifest generated after the first call may be inaccurate! Please see https://github.com/GoogleChrome/workbox/issues/1790 for more information.

Since I'm totally brand new to serviceworkers and PWA in general, I have no idea how to get around this issue.

[adammesa]

I also get this error in my console:

webpack.js?__WB_REVISION__=90450aec28871796918b3a8200e705c9:83 GET http://localhost:3000/_next/static/webpack/c2b41ab35ca3098117e1.hot-update.json 404 (Not Found)

[paales]

In your config you can do something like this to disable the generation in development mode:

      pwa: {
        disable: process.env.NODE_ENV !== 'production',
      }

Maybe that would be a good default, for the module, or is it advised to run with a service worker in development?

[adammesa]

@paales that did fix the bug, yes, but as a result PWA is fully disabled and my app is now a blank screen, even when visiting not in a browser. This is what it looks like without the disable: process.env.NODE_ENV !== 'production' line:

Most of the development stuff it's doing there, like disabling the cache and precache, is good. I can't help but wonder if GenerateSW is being called repeatedly because I had to make my pwa file look like:

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

module.exports = withPWA({
  // other next config
  pwa: {
      dest: 'public',
  }
})

and then in my NextJS public/ folder, add a static/ folder to contain my manifest.json

[paales]

@adammesa You probably need to delete the old service worker?

[adammesa]

@paales unfortunately that doesn't seem to be it! I think I finally understand the error a bit more. When I was updating the next & next-pwa, I got the following error:

warning " > next-pwa@2.4.1" has unmet peer dependency "webpack@>=4.0.0".
warning "next-pwa > clean-webpack-plugin@3.0.0" has unmet peer dependency "webpack@*".
warning "next-pwa > workbox-webpack-plugin@5.1.3" has unmet peer dependency "webpack@^4.0.0".

It sounds like next-pwa is piggy-backing off another one of my plugins which might have webpack in --watch mode...

[shadowwalker]

Hi @adammesa it has nothing to do with the dependency. When you run yarn dev, it run next command in dev mode, which is using the webpack watch mode. Yes, sw.js do get generated repeatedly if pwa is not disabled. The reason behind that is sometimes people want to debug certain features in dev mode (such as web push). You can simply put disable: process.env.NODE_ENV !== 'production' to your pwa configuration to disable it in dev mode. Remember clear all cache data and reload first when you couldn't figure out the issue.

[adammesa]

Thank you, @shadowwalker! I suppose you only enable PWA in dev mode when specifically debugging PWA?

[vinkovsky]

Hi @adammesa it has nothing to do with the dependency. When you run yarn dev, it run next command in dev mode, which is using the webpack watch mode. Yes, sw.js do get generated repeatedly if pwa is not disabled. The reason behind that is sometimes people want to debug certain features in dev mode (such as web push). You can simply put disable: process.env.NODE_ENV !== 'production' to your pwa configuration to disable it in dev mode. Remember clear all cache data and reload first when you couldn't figure out the issue.

Hi @shadowwalker! Could you please explain to me if it is possible to disable sw.js generation in development mode? Your advice is to add `disable: process.env.NODE_ENV! == 'production' 'doesn't seem to fix lags

[laclance]

never got this warning the first time I ran yarn dev but now I get it multiple time even after deleting .next folder, sw and workbox files, clearing all cache and doing a hard refresh.