vuejs/vue-cli · error · Error

${workboxPluginMode} is not a supported Workbox webpack plug

Error message

${workboxPluginMode} is not a supported Workbox webpack plugin mode. Valid modes are: ${Object.keys(workboxWebpackModule).join(', ')}

What it means

cli-plugin-pwa instantiates the Workbox webpack plugin class named by `pwa.workboxPluginMode` (defaulting to `GenerateSW`). It checks the mode is an own/inherited key exported by `workbox-webpack-plugin`; if not, it lists the valid exports so you know what to use. Typical valid exports are `GenerateSW` and `InjectManifest`.

Source

Thrown at packages/@vue/cli-plugin-pwa/index.js:42

    const name = api.service.pkg.name

    // the pwa plugin hooks on to html-webpack-plugin
    // and injects icons, manifest links & other PWA related tags into <head>
    webpackConfig
      .plugin('pwa')
        .use(require('./lib/HtmlPwaPlugin'), [Object.assign({
          name
        }, userOptions)])
        .after('html')

    // generate /service-worker.js in production mode
    if (process.env.NODE_ENV === 'production') {
      // Default to GenerateSW mode, though InjectManifest also might be used.
      const workboxPluginMode = userOptions.workboxPluginMode || 'GenerateSW'
      const workboxWebpackModule = require('workbox-webpack-plugin')

      if (!(workboxPluginMode in workboxWebpackModule)) {
        throw new Error(
          `${workboxPluginMode} is not a supported Workbox webpack plugin mode. ` +
          `Valid modes are: ${Object.keys(workboxWebpackModule).join(', ')}`
        )
      }

      const defaultOptions = {
        exclude: [
          /\.map$/,
          /img\/icons\//,
          /favicon\.ico$/,
          /^manifest.*\.js?$/
        ]
      }

      const defaultGenerateSWOptions = workboxPluginMode === 'GenerateSW'
        ? { cacheId: name }
        : {}

View on GitHub (pinned to 7eb93c169c)

Solutions

Use one of the documented exports — usually `'GenerateSW'` (auto-generated SW) or `'InjectManifest'` (custom SW).
Inspect valid keys: `Object.keys(require('workbox-webpack-plugin'))` and match exactly, including casing.
If you need InjectManifest, supply a `workboxOptions.swSrc` as well.

Example fix

// vue.config.js — before
module.exports = { pwa: { workboxPluginMode: 'generateSW' } }
// after
module.exports = { pwa: { workboxPluginMode: 'GenerateSW' } }

Defensive patterns

Strategy: validation

Validate before calling

const validModes = Object.keys(require('workbox-webpack-plugin'))
const mode = userPwa.workboxPluginMode || 'GenerateSW'
if (!validModes.includes(mode)) {
  throw new Error(`Invalid workboxPluginMode '${mode}'. Valid: ${validModes.join(', ')}`)
}

Type guard

const isWorkboxMode = (m) => m && Object.prototype.hasOwnProperty.call(require('workbox-webpack-plugin'), m)

Prevention

Default to 'GenerateSW' unless you ship a custom service worker.
Copy the exact exported name and casing from workbox-webpack-plugin.

When it happens

Trigger: Setting `pwa.workboxPluginMode` in vue.config.js to a value that is not exported by the installed workbox-webpack-plugin: wrong casing (`generateSW`, `Generate`), a removed/renamed export, or an unrelated string.

Common situations: Copy-pasting from older Workbox docs; a workbox major-version upgrade that changed exports; case mismatch.

Related errors

AI-assisted analysis of vuejs/vue-cli@7eb93c169c (2026-08-13). Data as JSON: /api/errors/bfc998760661d71f. Report an issue: GitHub.