vue-cli-service build: validationError for new workbox-webpack-plugin options

Question

With the following vue.config.js:

module.exports = {
  pwa: { 
    name: 'My App',
    ...
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      swSrc: 'src/sw.js', //and I use "sw.js" in my registerServiceWorker.js file
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

The validation errors during build are that 'skipWaiting' and 'clientsClaim' are not supported parameters. Why? swSrc is from the same list of options listed here and the build doesn't complain about that option. When I remove these two options, the build works.

So I guess my question is:

skipWaiting, clientsClaim are "not a supported parameter" of what? Of webpack? of the PWA plugin? Of the workbox-webpack plugin? Where can I find the correct set of options? Thanks.

UPDATE: I do not have a .env file setting the NODE-ENV. However npm run build which I guess builds production assets works only if I remove the 2 options. The removed options in dev (npm run serve) yields NO service worker file.

Answer 1

You are using workbox plugin in InjectManifest mode, but pass parameters for GenerateSW.

InjectManifest mode expects an existing service-worker file to be injected and it's path defined in swSrc, while GenerateSW will create service-worker file, thus accepts different set of options (e.g. swDest, etc)

All options for each of modes can be found on the same documentation page of workbox-webpack-plugin you've posted in corresponding sections.