workbox: Uncaught ReferenceError: regeneratorRuntime is not defined

Library Affected: workbox-webpack-plugin

Browser & Platform: Was found on Chrome v51

Bug: I am using this plugin like so:

new GenerateSW({
    babelPresetEnvTargets: ["last 4 versions", "safari >= 7"],
    cacheId: 'sw',
    cleanupOutdatedCaches: true,
    clientsClaim: true,
    exclude: [/\.map$/, /stats\.json$/],
    inlineWorkboxRuntime: true,
    runtimeCaching: [
        {
            urlPattern: /^https:\/\/fonts\.googleapis\.com.*/,
            handler: 'StaleWhileRevalidate',
        },
    ],
    skipWaiting: true,
    sourcemap: false,
    swDest: 'sw.js',
}),

This error is coming through into the browser console: Uncaught ReferenceError: regeneratorRuntime is not defined

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (6 by maintainers)

Most upvoted comments

When you set babelPresetEnvTargets, there’s a single transpilation performed, and a single service worker file output. You can think of it as meeting the requirements of the “lowest common denominator” based on your babelPresetEnvTargets configuration.

If your babelPresetEnvTargets configuration includes a browser that doesn’t have support for generators, then the single service worker file that’s output will include code that references regeneratorRuntime. If regeneratorRuntime isn’t available (which it wouldn’t be if you’re using a transpilation configured by Workbox), then the code will fail to run on any browser—it’s failing on modern browsers that have generator support because there’s now a dependency on the missing regeneratorRuntime.

As suggested, you can either perform your own transpilation after Workbox produces a service worker file, and in that transpilation, add in support for the regeneratorRuntime (check the babel documentation for exactly how you’d do that). Alternatively, you could ensure that you set Workbox’s babelPresetEnvTargets to only include browsers that have generator support, and the service worker file that Workbox creates should work across all of those browsers.

I’m leaving this issue open because it’s definitely something that we could help prevent from happening—I think Workbox could conditionally add the regeneratorRuntime to the service workers it transpiles without incurring a larger bundle size when it’s not needed. But what I’m offering in the meantime is some workarounds that should address your issue.

jeffposnick on May 15, 2020

I have now switched to the InjectManifest method:

new InjectManifest({
            dontCacheBustURLsMatching: /^\/static\/modern\/(components\/([a-z0-9-]+\/)*|scenes\/([a-z0-9-]+\/)*)?[0-9a-z-]+\.[0-9a-z-]+\.js$/,
            exclude: [/\.map$/, /stats\.json$/],
            swDest: 'sw.js',
            swSrc: './src/utilities/service-worker/sw-source.js',
        }),

Our webpack babel config states:

"last 4 versions", "safari >= 7"

But when I run es-check against this (checking for es5) it fails with:

· erroring file: ./dist/static/legacy/sw.js · error: SyntaxError: The keyword ‘const’ is reserved (1:1414)

Am I correct in thinking that Webpack should have transpiled sw-source.js and sw.js?

When I then run the following command on the sw.js file, it transpiles to es5 (note that prod-client-legacy also states last 4 versions", "safari >= 7):

shell.exec(
    './node_modules/.bin/babel --config-file ../../babel.config.js --env-name "prod-client-legacy" ./dist/static/legacy/sw.js --out-file ./dist/static/legacy/sw.js'
);

joetidee on Jul 2, 2020