precacheAndRoute got error on addToCacheList

Question

I have created PWA and implementef workbox using workbox-webpack-plugin.

I got error when i tried to precache the files.

the error that i got (see image below)

Console output

sw.js:1 Uncaught TypeError: e is not iterable
    at d.addToCacheList (sw.js:1)
    at sw.js:1
    at sw.js:1
    at sw.js:1

although self.__WB_MANIFEST return correctly

0: {revision: "8601238f233fac234d7baf4d32a932d8", url: "favicon.ico"}
10: {revision: "70d6d945809b3a4bde074fb5a8e1a6ac", url: "register.js"}

---

I tried debugging workbox-precaching but got stuck due to no gulpfile provided. i cannot find gulpfile on node_modules/workbox-precaching.

---

Here the detail of my code src/sw.js

import { precacheAndRoute } from 'workbox-precaching';

console.log(self.__WB_MANIFEST)
precacheAndRoute(self.__WB_MANIFEST);

webpack.config.js

 plugins: [
    ...
    new WorkboxPlugin.InjectManifest({
      swSrc: './src/sw.js',
      swDest: 'sw.js',
    })
  ],

register.js

if ("serviceWorker" in navigator) {
    window.addEventListener("load", function () {
        navigator.serviceWorker
            .register("sw.js")
            .then(function (registration) {
                console.log(location.href, registration.scope);
            })
            .catch(function (error) {
                console.log(error)
            });
    });

package.json

    "webpack": "^5.4.0",
    "webpack-cli": "3.3.12",
    "workbox-webpack-plugin": "^5.1.4

Answer 1

If I recall, InjectManifest will only replace the first occurrence of self.__WB_MANIFEST in your swSrc file. Your call to precacheAndRoute(self.__WB_MANIFEST) will therefore not get the correct replacement, and instead self.__WB_MANIFEST (which is undefined and not iterable) will be passed to precacheAndRoute().

If you want to do something to the manifest before calling precacheAndRoute(), like logging it, then you can do:

const manifest = self.__WB_MANIFEST;

// Use manifest however you'd like:
console.log(manifest);
precacheAndRoute(manifest);