Search code examples
webpackwebpack-dev-serverwebpack-5workbox-webpack-plugin

Workbox Webpack Plugin GenerateSW (v7.x.x) importWorkboxFrom property is not expected

Recently I've upgraded my webpack configurations from v4 to v5, along with upgraded other related packages. From those packages, I upgraded workbox-webpack-plugin also to latest version (v7.0.0). Now I am facing following error,

Failed to compile. Please check your GenerateSW plugin configuration:

[WebpackGenerateSW] 'importWorkboxFrom' property is not expected to be here. Did you mean property 'importScripts'?

Previously I was using workbox-webpack-plugin v4.3.1 and in my webpack config I had below config:

new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true,
  exclude: [/\.map$/, /asset-manifest\.json$/],
  importWorkboxFrom: 'cdn',                         <<------- Issue with this line
  navigateFallback: publicUrl + '/index.html',
  navigateFallbackBlacklist: [
    new RegExp('^/_'),
    new RegExp('/[^/?]+\\.[^/]+$'),
  ],
}),

Could anyone please tell, what should I change in importWorkboxForm: 'cdn' line? I checked this link but couldn't get any solid solution for importWorkboxForm property.

Any kind of help will be appreciated. Thanks

Solution

  • Check this migration docs from google.

    https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/

    "If you're using the navigateFallback option in one of the build tool's "generate SW" mode, then the switchover will happen automatically. If you previously configured either the navigateFallbackBlacklist or navigateFallbackWhitelist options, change those to navigateFallbackDenylist or navigateFallbackAllowlist, respectively."

    It will solved mine.