Webpack workbox Can't find self.__WB_MANIFEST in your SW source

Question

I migrate from v4 to v5 of webpack-workbox-plugin but when I try to build, I got error:

ERROR in Can't find self.__WB_MANIFEST in your SW source.
Child InjectManifest:
    Asset     Size  Chunks             Chunk Names
    sw.js  1.5 KiB       0  [emitted]  InjectManifest
Child html-webpack-plugin for "index.html":
     1 asset

Do __WB_MANIFEST will create in a precach-manifest file and import automatically like v4?

WebpackConfig :

new WorkboxPlugin.InjectManifest({
      swSrc: 'sw.js',
      chunks: ['*.chunk.js'],
      exclude: [/\.(?:png|jpg|jpeg|svg)$/, /\.map$/, /manifest\.json$/, /service-worker\.js$/, /sw\.js$/],
      include: [path.resolve(process.cwd(), 'build')],
    }),

My sw.js:

importScripts('./ChabokSDKWorker.js', 'https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');

/* eslint-disable no-undef */

if (workbox) {
  workbox.core.skipWaiting();
  workbox.core.clientsClaim();
  workbox.precaching.cleanupOutdatedCaches();

  // eslint-disable-next-line no-restricted-globals,no-underscore-dangle
  workbox.precaching.precacheAndRoute(self.__WB_MANIFEST);

  // java-script files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.js$'),
    workbox.strategies.StaleWhileRevalidate({
      cacheName: 'js-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 20,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  // css files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.css$'),
    workbox.strategies.StaleWhileRevalidate({
      cacheName: 'css-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 5,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  // image files cache
  workbox.routing.registerRoute(
    new RegExp('.+\\.(png|jpg|jpeg|svg)$'),
    workbox.strategies.CacheFirst({
      cacheName: 'images-cache',
      plugins: [
        new workbox.expiration.Plugin({
          maxEntries: 20,
          maxAgeSeconds: 60 * 60 * 24 * 7,
          purgeOnQuotaError: true,
        }),
        new workbox.cacheableResponse.Plugin({
          statuses: [0, 200],
        }),
      ],
    }),
  );

  workbox.routing.registerRoute(
    new RegExp('/.*'),
    workbox.strategies.NetworkFirst({}),
    'GET',
  );
} else {
  console.log(`Boo! Workbox didn't load 😬`);
}
/* eslint-enable no-undef */

Ending

Answer 1

It was my webpack config for injectManifest bug, I fixed it like this :

    new WorkboxPlugin.InjectManifest({
      swSrc: path.join(process.cwd(), '/app/resources/service-worker.js'),
      swDest: 'sw.js',
      exclude: [
        /\.map$/,
        /manifest$/,
        /\.htaccess$/,
        /service-worker\.js$/,
        /sw\.js$/,
      ],
    }),

and now self.__WB_MANIFEST will replace with list of precache files

Ending

@netalex well you must give the full service-worker path – Ending

Answer 2

After upgrade from v3 to v6, the following change fixed this error.

from:

workbox.precaching.precacheAndRoute([]);

to:

import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
...
precacheAndRoute(self.__WB_MANIFEST);

Titustityus

Answer 3

I got this error in an Ionic framework project where I had added ios and android through capacitor. I got this error every time I ran react-scripts build

I noticed that this was the code for service-worker.js -

import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
...
let self;
...
precacheAndRoute(self.__WB_MANIFEST);

It was a pretty obvious fix, but once I commented the line below, react-scripts build started working again (No idea why this line was even in there)

// let self;

Hope this helps someone seeing this error in react-scripts build

Priggery

Answer 4

I discovered another potential issue when adding InjectManifest to an existing TypeScript app. My service worker file is ./src/service-worker.ts, and I found I had to specify both swSrc and swDest; whatever default values are being used under the covers didn't cover the case of a .ts file getting compiled to a .js file, I guess.

In my case I'm using craco, so my craco config is like this:

const { InjectManifest } = require('workbox-webpack-plugin');

module.exports = {
  webpack: {
    plugins: {
      add: [
        [
          new InjectManifest({
            swSrc: './src/service-worker.ts',
            swDest: 'build/service-worker.js',
          }),
          'append',
        ],
      ],
    },
  },
};

I wasn't able to try this out, but I assume a normal webpack config would be something like this:

new WorkboxPlugin.InjectManifest({
      swSrc: './src/service-worker.ts',
      swDest: 'build/service-worker.js',
      chunks: ['*.chunk.js'],
      // ...
    }),

Julesjuley