Registry /
web-framework / serviceworker-webpack-plugin
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
ServiceWorkerWebpackPlugin
✓ import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
✗ const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin').default;
Default export is the constructor. In CommonJS, use require('serviceworker-webpack-plugin').default; plain require('serviceworker-webpack-plugin') returns the module object.
runtime
✓ import runtime from 'serviceworker-webpack-plugin/lib/runtime';
✗ import { runtime } from 'serviceworker-webpack-plugin';
The runtime module is a separate file in the lib folder, not part of the main export. Must import with relative path.
serviceWorkerOption
✓ // Global variable injected into the service worker script at build time
✗ import { serviceWorkerOption } from 'serviceworker-webpack-plugin';
This is a global variable injected into the service worker file by the plugin. It is not importable.
Demonstrates setup: plugin in webpack config, custom service worker that caches all assets, and runtime registration in main bundle.
// webpack.config.js
import path from 'path';
import ServiceWorkerWebpackPlugin from 'serviceworker-webpack-plugin';
export default {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.[chunkhash].js',
publicPath: '/',
},
plugins: [
new ServiceWorkerWebpackPlugin({
entry: path.join(__dirname, 'src/sw.js'),
}),
],
};
// src/sw.js
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('my-cache').then(function(cache) {
return cache.addAll(serviceWorkerOption.assets);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
// src/index.js
import runtime from 'serviceworker-webpack-plugin/lib/runtime';
if ('serviceWorker' in navigator) {
runtime.register();
}
Errors
Common errors & fixes
TypeError: ServiceWorkerWebpackPlugin is not a constructor
CommonJS require returns the module object, not the constructor directly
fixUse `const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin').default` Module not found: Can't resolve 'serviceworker-webpack-plugin/lib/runtime'
Incorrect import path or missing dependency
fixEnsure correct import: `import runtime from 'serviceworker-webpack-plugin/lib/runtime'`
Error: serviceWorkerOption is not defined
The global variable is only available inside the service worker file processed by the plugin
fixReference `serviceWorkerOption` only in the file specified as `entry` in the plugin options
Audit
Dependencies
webpackrequiredpeer dependency; plugin designed specifically for webpack 4.x