Workbox: [v5.0.0-beta.1] Can't find self.__WB_MANIFEST in your SW source

[frlinw]

Library Affected:
workbox-webpack-plugin

Browser & Platform:
all browsers

Issue or Feature Request Description:
The issue has been introduced in v5.0.0-beta.1

During compilation:

ERROR in Can't find self.__WB_MANIFEST in your SW source.

if I set the injectionPoint explicitly with the default value (injectionPoint: '__WB_MANIFEST'), the error is different

ERROR in Can't find data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiLi9ub2RlX21vZHVsZXMvY29yZS1qcy9pbnRlcm5hbHMvYS1mdW5jdGlvbi5qcy5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL25vZGVfbW9kdWxlcy9jb3JlLWpzL2ludGVybmFscy9hLWZ1bmN0aW9uLmpzPzFjMGIiXSwic291cmNlc0NvbnRlbnQiOlsibW9kdWxlLmV4cG9ydHMgPSBmdW5jdGlvbiAoaXQpIHtcbiAgaWYgKHR5cGVvZiBpdCAhPSAnZnVuY3Rpb24nKSB7XG4gICAgdGhyb3cgVHlwZUVycm9yKFN0cmluZyhpdCkgKyAnIGlzIG5vdCBhIGZ1bmN0aW9uJyk7XG4gIH0gcmV0dXJuIGl0O1xufTtcbiJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQURBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=/n/# in assets.

[darkscript]

I also got that, was thinking am doing something wrong. Do we have some documentation for v5

[jeffposnick]

Thanks for testing out v5!

For the first error, Can't find self.__WB_MANIFEST in your SW source., are you saying that you definitely do have the literal string self.__WB_MANIFEST in your swSrc file, but it's not being found? Can you provide a snippet of your swSrc file showing where self.__WB_MANIFEST is be included?

For the second error, I believe that https://github.com/GoogleChrome/workbox/pull/2251 (which hasn't yet made it into a published release on npm) should address it. You should be able to address it in the meantime by setting mode: 'production' and devtool: 'source-map' in your webpack config.

[frlinw]

@jeffposnick Yes, it can't be found because it's not included in the generated service worker

[jeffposnick]

I'm not clear what you mean by "generated service worker". The fact that you mention injectionPoint makes me think that you're using the InjectManifest (not GenerateSW) plugin, which will use whatever you provide as the swSrc file as the basis for your service worker.

In v5, InjectManifest does compile the swSrc file prior to injecting in the manifest, but I'm not aware of any minification process that would cause precacheAndRoute(self.__WB_MANIFEST); to be tree-shaken or otherwise optimized away. But perhaps there are webpack configuration scenarios that I haven't anticipated.

It would be super-helpful if you could either pass along a URL for your full project setup on GitHub or elsewhere (webpack config + swSrc file), or if you can't, then paste your webpack config + swSrc contents into this issue.

Thanks for taking the time to help debug this.

[frlinw]

by generated I meant compiled, I forgot about the possible confusion with GenerateSW.
I talked about injectionPoint because I just test to explicitly set the property after having the first error which led to an other error.

I didn't change anything in my (basic) conf betweeen v5.0.0-beta.0 and v5.0.0-beta.1 both tested with the same version of webpack & webpack-dev-server:

new WorkboxPlugin.InjectManifest({
      swSrc: `${rootPath}/src/sw.js`,
      swDest: 'sw.js',
      include: [
        /\.html$/,
        /\.js$/,
        /\.css$/,
        /\.woff2$/,
        /\.jpg$/,
        /\.png$/
      ],
      maximumFileSizeToCacheInBytes: 100 * 1024 * 1024
})

[jeffposnick]

Can you provide the full contents of your ${rootPath}/src/sw.js file? Thanks!

[frlinw]

It's just a part of the service worker

import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute'
import { createHandlerForURL } from 'workbox-precaching/createHandlerForURL'
import { NavigationRoute } from 'workbox-routing/NavigationRoute'
import { registerRoute } from 'workbox-routing/registerRoute'


precacheAndRoute(__WB_MANIFEST)

registerRoute(
  new NavigationRoute(createHandlerForURL('/index.html'))
)

[jeffposnick]

Your swSrc shows:

precacheAndRoute(__WB_MANIFEST)

By default, you need to use self.__WB_MANIFEST:

precacheAndRoute(self.__WB_MANIFEST)

(Unless you set injectionPoint: '__WB_MANIFEST', like you said.)

Apologies if this specific requirement caught you out while testing the beta releases, especially since we don't have the documentation in place yet. That's the default injectionPoint that we're going with in v5 across all the build tools.

And again, the second error you encountered, once you got the injectionPoint configuration resolved, should be addressed by https://github.com/GoogleChrome/workbox/pull/2251.

[frlinw]

Might you explain the purpose of this change? it introduces an unexpected behavior as it makes global context ref required by default when it's normally optional.

[jeffposnick]

The idea was to use something that would allow the pre-injected swSrc file to be considered valid, both in terms of JavaScript syntax (__WB_MANIFEST on its own is an undeclared symbol) and in terms of TypeScript checking. We have self.__WB_MANIFEST declared as being the same type as what the eventual injected manifest will have:

https://github.com/GoogleChrome/workbox/blob/f23924a988a3e321dbcd9e3781f07b1de5dce916/packages/workbox-precaching/src/precacheAndRoute.ts#L15-L19

[frlinw]

Thanks for the answer. I understand the change.
Anyway, I still think, by default, the choice to use the global context should be left to the user as it's the native javascript behavior

[mcha-dev]

Hi @jeffposnick

I'm a bit confused. So when using InjectManifest of workbox-webpack-plugin we will need to npm install workbox libraries (workbox-core, workbox-precaching, workbox-routing ..etc)??

Does that mean those will be installed twice (with webpack plugin & separately)?

Is there a way to let workbox-webpack-plugin expose them? Or do I have to install them if I want, for example, to call skipWaiting and clientsClaim() ?

[jeffposnick]

workbox-webpack-plugin includes workbox-build as a dependency, and workbox-build includes all those other workbox-* libraries:

https://github.com/GoogleChrome/workbox/blob/dd408f0c17a50fb68cac485133123775c3d4dfc2/packages/workbox-build/package.json#L45-L58

Technically, that should be sufficient, but some package managers (e.g. yarn) are not happy if you rely on transitive dependencies, so explicitly listing the workbox-* libraries that you use as your own dependencies is probably the best bet. They shouldn't be installed twice into node_modules, as modern package managers know how to deduplicate that as long as the semver ranges match.

[mcha-dev]

Thanks for explaining that 🙏

I went I ahead and npm installed the ones I'm using... _I prefer it this way actually (explicit, and I don't have to deal with eslint noise)_

[Richardinho]

I have encountered the same error whilst using webpack-workbox-plugin with the InjectManifest function.
Adding literally just self.__WB_MANIFEST to the bottom of my Service Worker file seems to have fixed it. I guess the plugin code expects to find this variable in the file and doesn't like it when it isn't there. It seems odd that I need to add this (seemingly useless, since I'm not interested in precaching) piece of boilerplate code into my service worker. Is the plugin really not able to do this? It also isn't in the documentation anywhere that I'd expect it to be. e.g. https://developers.google.com/web/tools/workbox/guides/precache-files/webpack

[jeffposnick]

InjectManifest does manifest creation, self.__WB_MANIFEST replacement, and compilation, but if you don't need the precaching bits, the plugin doesn't need to be used.

You can follow the steps at https://developers.google.com/web/tools/workbox/guides/using-bundlers to just import the bits of Workbox that you do want to use (workbox-routing, workbox-strategies, etc.), and then compile your service worker file using webpack as if it were any other entry point.