Workbox throws warning but still caches it (was provided in your Workbox chunks config, but was not found in the compilation.)

Library Affected: workbox-webpack-plugin: ^6.0.2

Issue or Feature Request Description: Currently, I’m upgrading from workbox-webpack-plugin: ^4.3.1 to ^6.0.2, but I noticed a warning that I’m not sure how I should solve it.

It says: `WARNING in The chunk ‘/js/manifest’ was provided in your Workbox chunks config, but was not found in the compilation``

The weird part is that the manifest.js file is still cached by the SW (this same warning happens for vendor.js as well and is cached too)

Why does it still cache it when it says it couldn’t find it?

Besides that, I’m struggling to find out what exactly my chunk name for manifest is. I know this is an issue from another plugin, however since using Laravel Mix v6.*, I cannot see the chunk names. It only outputs this in the terminal:

Laravel Mix v6.0.8   
                        

✔ Compiled Successfully in 38735ms
┌───────────────────────────────────┬────────────┐
│ File                              │ Size       │
├───────────────────────────────────┼────────────┤
│ /js/vendor.js                     │ 4.05 MiB   │
├───────────────────────────────────┼────────────┤
│ css/app.css                       │ 246 KiB    │
├───────────────────────────────────┼────────────┤
│ /js/app.js                        │ 104 KiB    │
├───────────────────────────────────┼────────────┤
│ images/vendor/intl-tel-input/bui… │ 69.2 KiB   │
├───────────────────────────────────┼────────────┤
│ service-worker.js                 │ 22.8 KiB   │
├───────────────────────────────────┼────────────┤
│ js/6231.9b6787592e9af06465aa.js   │ 6.46 KiB   │
├───────────────────────────────────┼────────────┤
│ js/1901.f3d670a3cfb776389054.js   │ 6.17 KiB   │
├───────────────────────────────────┼────────────┤
│ /js/manifest.js                   │ 6.15 KiB   │

But this clearly shows how /js/manifest.js is written.

In the webpack.mix.js file I wrote this:

      new InjectManifest({
           swSrc: './resources/js/sw.js',
           swDest: 'service-worker.js',
           // precaching only these.
           chunks: [
               'routes-settings', 'routes-sell-food', 'routes-checkout',
               '/js/app', '/js/moment', '/js/canvas', '/js/manifest',
               '/js/vendor',
           ],
           maximumFileSizeToCacheInBytes: 5000000,
       }),

Everything in the chunks array worked well besides the /js/manifest and /js/vendor.

p.S. I hope there are no misunderstandings, I want to cache those two files, but I’m just curious why the warnings are still there

[jeffposnick]

Thanks for that clean reproduction!

From examining that while debugging, I can see that compilation.namedChunkgroups, which is what Workbox is currently using, only has one entry (for the /js/app chunk). compilation.namedChunks, however, has four entries, including the chunks that you’re trying to use.

I’m going to have to do a little research into webpack’s innards to see what the difference is between compilation.namedChunkgroups and compilation.namedChunks, and we can potentially switich to using compilation.namedChunks in this part of the workbox-webpack-plugin code if it seems like the right thing to do.

[jeffposnick]

The underlying code in question is https://github.com/GoogleChrome/workbox/blob/2df5ce58bd74abd8da4ec90e427f0e4431a0cff2/packages/workbox-webpack-plugin/src/lib/get-manifest-entries-from-compilation.js#L62-L141

That code should add an asset to the precache manifest if both of these compound conditions are true:

• The asset is a member of a chunk that’s allowed via the chunks config, or the asset matches the criteria in include.
• The asset is NOT a member of a chunk that’s listed in the excludeChunks config, and the asset does not match the criteria in exclude.

So yes, both chunks and include can be used at the same time.

If you’re still seeing warnings like The chunk ‘/js/app’ was provided in your Workbox chunks config, but was not found in the compilation, it’s because those aren’t the names of chunks that exist in your webpack configuration. Workbox can’t do much else beyond warn if you provide an name for a chunk that doesn’t exist.

Based on your elaboration of the problem, if you’re looking for more flexibility to support asset names that include hashes, your best bet would be to use include and pass in something other than strings as the parameters. include, as mentioned in the Workbox docs, supports any webpack condition, and those conditions could be RegExps or predicate functions. Under the hood, Workbox actually just calls the same code that webpack uses:

https://github.com/GoogleChrome/workbox/blob/2df5ce58bd74abd8da4ec90e427f0e4431a0cff2/packages/workbox-webpack-plugin/src/lib/get-manifest-entries-from-compilation.js#L15-L41