/

How to Fix the `regeneratorRuntime is not defined` Error in Parcel

How to Fix the regeneratorRuntime is not defined Error in Parcel

If you are using Babel in your project and you encounter the regeneratorRuntime is not defined error after adding an async function or any recent JavaScript feature, don’t worry. This issue can be resolved by loading the regenerator-runtime runtime in addition to the polyfill generated by Babel, which is used by Parcel.

Here’s a solution you can try: add the following line at the top of your main JavaScript file:

1
import 'regenerator-runtime/runtime'

By default, Parcel includes this package, but it increases the overall size of your codebase by approximately 25KB.

Alternatively, you can use the more efficient approach of adding the browserslist property to your package.json file. This solution optimizes the codebase and eliminates the need for a separate runtime.

For example, if you only need to support the latest version of Chrome for testing purposes, you can use the following configuration:

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

If you need to support multiple browsers, you can specify them as follows:

1
2
3
4
5
6
7
"browserslist": [
  "last 3 and_chr versions",
  "last 3 chrome versions",
  "last 3 opera versions",
  "last 3 ios_saf versions",
  "last 3 safari versions"
]

Another option is to use a date-based approach:

1
2
3
"browserslist": [
  "since 2017-06"
]

Make sure to include a version that is recent enough to support async/await without the need for Babel to add a polyfill.

For a comprehensive list of valid values for the browserslist property, you can visit the following link: https://github.com/browserslist/browserslist

tags: [“Parcel”, “Babel”, “JavaScript”, “async/await”, “regenerator-runtime”, “codebase optimization”]