vite-plugin-serwist

raw JSON →
10.0.0-preview.14 verified Mon Apr 27 auth: no javascript

Vite plugin for integrating Serwist (a Workbox-inspired service worker library) into your Vite application. Current stable version is 9.5.7, with 10.0.0-preview.14 available. Supports React, Vue, Svelte, Preact, SolidJS, and TypeScript. Unlike Workbox, Serwist offers modern ESM-first architecture, full TypeScript support, and plugin-specific configurations for various frameworks. Published under the serwistjs GitHub organization with monthly release cadence.

Common errors

error Cannot find module 'vite-plugin-serwist' ↓
cause Package not installed; or using older npm versions that don't resolve peer dependencies automatically.
fix
Run 'npm install vite-plugin-serwist' and ensure all peer deps (vite, etc.) are installed.
error SerwistPlugin is not a function / SerwistPlugin is not a constructor ↓
cause Incorrect import: using default import when it's a named export, or using CommonJS require without default.
fix
Use 'import { SerwistPlugin } from 'vite-plugin-serwist'' correctly.
error Uncaught ReferenceError: self is not defined ↓
cause Attempting to use Serwist's service worker code in a non-worker context (e.g., main thread).
fix
Ensure the service worker source file is only imported in a Web Worker or Service Worker environment.

Warnings

breaking vite-plugin-serwist v10 changes the plugin option name from 'swSrc' to 'swSrc' (remains same) but modifies 'injectionPoint' default from 'self.__WB_MANIFEST' to 'self.__SW_MANIFEST'. ↓
fix Update injectionPoint to 'self.__SW_MANIFEST' or explicitly set to 'self.__WB_MANIFEST'.
deprecated Using CommonJS require() is deprecated in v9+. The package is ESM-only. ↓
fix Use import syntax in an ESM project (type: 'module' in package.json or .mjs extension).
gotcha The plugin expects a service worker source file that exports nothing by default; using a non-'self.__WB_MANIFEST' injection point requires updating both the plugin config and the service worker code. ↓
fix Ensure your service worker source uses the same injection point identifier as the plugin config.
gotcha Glob patterns in 'globPatterns' must be relative to 'globDirectory'; common mistake is using absolute paths or patterns that don't match. ↓
fix Double-check that glob patterns are relative to the output directory (e.g., 'dist').

Install

npm install vite-plugin-serwist
yarn add vite-plugin-serwist
pnpm add vite-plugin-serwist

Imports