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

[jeffposnick]

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]

Hey all. Sorry for not updating this for a while.

@phil-w, the babelPresetEnvTargets setting is available when you’re using the GenerateSW plugin.

If you’re using the InjectManifest plugin, then any Babel plugins from the parent compilation is applied to the child compilation that outputs your service worker.

@mycolaos, if you could point me to a GitHub project or some other code archive that includes a full setup which reproduces the problem you’re seeing, I’ll dive into it and tell you what needs to be configured where, and potentially see how those changes could be upstreamed to the source projects.

In general, one option that wasn’t mentioned yet is that if you want to pull in the regenerator runtime into your service worker, it can be explicitly loaded from, e.g., the unpkg CDN (or using a local copy that you maintain). The mechanism for loading it varies depending on which webpack plugin you’re using:

• GenerateSW: add importScripts: ['https://unpkg.com/regenerator-runtime@0.13.7/runtime.js'] to your Workbox configuration.
• InjectManifest: add importScripts('https://unpkg.com/regenerator-runtime@0.13.7/runtime.js'); to the top of your swSrc file.

Again, you can replace those URLs with a copy of the regenerator-runtime code served from a local URL if you’d rather not rely on a CDN.