Fix 'regeneratorRuntime is not defined' in Parcel

To fix regeneratorRuntime is not defined in Parcel you have two options: import the regenerator-runtime package in your main JavaScript file, or add a browserslist field to package.json targeting recent browsers. I recommend the second one.

I run into this problem in a project using Babel as soon as I added an async function, but the problem is the same for any recent JavaScript feature:

Why this error happens

Babel, used by Parcel under the hood, does not know which browsers you want to support. By default it plays safe and compiles async/await down to older JavaScript.

That compiled code depends on a helper called regeneratorRuntime, which is expected to exist as a global. Babel generates the transformed code, but does not load the runtime that provides the helper. So the page loads, you call your async function, and the browser throws the error.

That’s why the fix is either loading that runtime yourself, or telling Babel it doesn’t need the transformation at all.

Fix 1: import the runtime

One solution: add to the top of your main JavaScript file:

import 'regenerator-runtime/runtime'

Parcel will include this package by default, increasing the size of 25KB.

It works, but you ship 25KB of runtime to every visitor, including the ones on browsers that support async/await natively.

Fix 2: add a browserslist field

The solution that is the most efficient in terms of codebase is adding the browserslist property to your package.json.

For example:

"browserslist": [
  "last 1 Chrome version"
]

For testing is good enough. To support multiple browsers:

"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

or also:

"browserslist": [
  "since 2017-06"
]

This tells Babel which browsers your app targets. All of those support async/await natively, so Babel leaves your async functions untouched, and the helper is never needed.

You have to add a version that’s recent enough to support async/await, so Babel does not try to add a polyfill.

Check all the valid values here: https://github.com/browserslist/browserslist

The error is still there?

One thing to watch out for: Parcel caches compiled files in the .cache folder. If you add browserslist and the error doesn’t go away, delete that folder and restart the dev server:

rm -rf .cache dist

The old compiled output was still being served from cache. After a clean build, the error is gone.