rollup-plugin-workbox

8.1.3 verified Mon Apr 27 auth: no javascript

Rollup plugin that builds a service worker with Workbox as part of your Rollup build. Current stable version is 8.1.3, released under the @web scope on npm. Enables integration of Workbox's generateSW and injectManifest modes directly into Rollup's build pipeline, with optional console output customization and automatic bundling of service worker code via esbuild when using injectManifest. Key differentiator: seamless Rollup integration vs standalone workbox-build CLI or webpack plugin. Part of the modernweb-dev/web project. Releases are patch-level; no major changes in recent history. Ships TypeScript definitions.

Common errors

error Error: The swDest option is required. ↓

cause Missing 'swDest' in workbox config object passed to generateSW or injectManifest.

fix

Add 'swDest': 'path/to/sw.js' to the config object.

error Could not resolve entry module '.../sw.js' ↓

cause injectManifest swSrc path is incorrect or file does not exist.

fix

Check that swSrc file exists at the specified path relative to project root.

error The 'globDirectory' property is required for injectManifest. ↓

cause Missing 'globDirectory' in injectManifest config.

fix

Add 'globDirectory': 'dist' or your output directory.

Warnings

gotcha The workbox config object requires swDest and globDirectory. Omitting them will cause build failures. ↓

fix Always include swDest and globDirectory in the config object.

deprecated Old workbox-build versions (v5 and below) may have different config options. Ensure compatibility. ↓

fix Use workbox-build v6+ and refer to official workbox docs.

gotcha injectManifest bundles the service worker via esbuild; source maps may not be preserved by default. ↓

fix Set esbuildOptions.sourcemap: true in injectManifest config if source maps are needed.

gotcha The plugin runs during the build hook; if used with watch mode, it may rerun unnecessarily. ↓

fix Use a conditional or separate rollup config for production builds only.

gotcha When using injectManifest, the swSrc file must exist and be a valid JS file; otherwise esbuild bundling fails. ↓

fix Ensure swSrc is a valid JavaScript file with proper imports.

Install

npm install rollup-plugin-workbox

yarn add rollup-plugin-workbox

pnpm add rollup-plugin-workbox

Imports

generateSW
wrong
```
import generateSW from 'rollup-plugin-workbox'
```
correct
```
import { generateSW } from 'rollup-plugin-workbox'
```
Named export, not default. Also invalid: const { generateSW } = require('rollup-plugin-workbox') is valid CJS, but ESM is recommended.

injectManifest

wrong

import * as workbox from 'rollup-plugin-workbox'; const injectManifest = workbox.injectManifest;

correct

import { injectManifest } from 'rollup-plugin-workbox'

Named export. Using namespace import works but is unnecessary.

generateSW (CJS)

wrong

const generateSW = require('rollup-plugin-workbox')

correct

const { generateSW } = require('rollup-plugin-workbox')

CJS users must destructure. Module exports a named object, not default.

Quickstart

Generates a complete service worker using Workbox's generateSW mode during Rollup build. The plugin precaches all JS, CSS, HTML files in dist/.

// rollup.config.mjs
import { generateSW } from 'rollup-plugin-workbox';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'esm',
  },
  plugins: [
    generateSW({
      swDest: 'dist/sw.js',
      globDirectory: 'dist',
      globPatterns: ['**/*.{js,css,html}'],
      skipWaiting: true,
      clientsClaim: true,
    }),
  ],
};