You will need to have the regeneratorRuntime.

Install this two packages - babel-plugin-transform-regenerator and babel-polyfill

Add the following Babel configuration via .babelrc

{
"plugins": ["transform-regenerator"]
}

There is already a very good answer here (originally posted on the Babel6 question) which I will just translate to Yarn. Basically, you need babel runtime (NOT as a dev dependency) and the plugin transform-runtime

yarn add @babel/runtime
yarn add -D @babel/plugin-transform-runtime

And, in .babelrc, add:

{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/transform-runtime"]
}

Updated Answer:

If you are using Babel 7.4.0 or newer, then @babel/polyfill has been deprecated. Instead, you will want to use the following at the top of your main js file (likely index.js or similar):

import "core-js/stable";
import "regenerator-runtime/runtime";

Install these packages either with npm:

npm install --save core-js
npm install --save regenerator-runtime

or with yarn:

yarn add core-js
yarn add regenerator-runtime

Original Answer:

I just encountered this problem and came across the following solution:

In package.json I had @babel/polyfill as a dependency. However, in my index.js (My main js file) I had neglected to place the following line at the the top:

import '@babel/polyfill'

Once I imported it, everything worked fine.

I did not need to install babel-runtime as other answers are suggesting.

React.js Users

If this issue faced you while using react (specifically while trying to use Async/Wait), then Valentino Gagliardi provided a detailed approach on his blog regarding how to address this issue

I had this error in my react project with webpack 4 and this was preventing the whole project to get rendered.

This is how I solved it:

Install plugin-transform-runtime:

npm install @babel/plugin-transform-runtime -D

Add plugin-transform-runtime to the plugin's list in the .babelrc file:

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
["@babel/transform-runtime"]  // <= Add it here
]
}

I just solved this error when I imported babel-polyfill directly into the file that shows the error, for example, the error says "ReferenceError: regeneratorRuntime is not defined at /dist/models/usersSchema.js", so I use this in my usersSchema.js file:

require("babel-polyfill");

(you can use import "babel-polyfill";as well)

Babel 7.4.0 and later

There are two main configurations - one for apps and one for libraries.

Option 1: App

When to use: ✔ for applications ✔ global scope polyfills ✔ smallest bundle size ✔ selective inclusion via targets ✔ No need to process node_modules for polyfills

"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage", // alternative mode: "entry"
"corejs": 3, // default would be 2
"targets": "> 0.25%, not dead"
// set your own target environment here (see Browserslist)
}
]
]

npm i --save-dev @babel/preset-env


npm i regenerator-runtime core-js // run-time dependencies
// regenerator-runtime: transform (async) generators and `async`/`await`
// core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-env selectively includes polyfills for targets, specified by a Browserslist query. There are two modes - try usage first (more convenient), else entry (more flexible and robust):

• useBuiltIns 'usage': no need to import anything manually. All polyfills are added automatically based on their code usage in a file.

• useBuiltIns 'entry': Add these import entries once (!) in your app - akin to @babel/polyfill:

  import "regenerator-runtime/runtime";
  import "core-js/stable"; // or more selective import, like "core-js/es/array"
  

Extension

For advanced cases, you might use @babel/transform-runtime (dev) and @babel/runtime (run-time) only for Babel helpers to reduce bundle size a bit more - called helper aliasing.

Option 2: Library

When to use: ✔ for libraries ✔ no global scope pollution ✔ includes all polyfills, not selective ✔ bigger bundle size neglectable

"plugins": [
[
"@babel/plugin-transform-runtime",
{
"regenerator": true,
"corejs": 3
}
]
]

npm i --save-dev @babel/plugin-transform-runtime // only for build phase


npm i @babel/runtime // runtime babel helpers + just regenerator runtime
// OR (choose one!)
npm i @babel/runtime-corejs3
// also contains other JS polyfills (not only regenerator runtime)
// depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

See @babel/plugin-transform-runtime, @babel/runtime, @babel/runtime-corejs.

Extension

You can additionally use @babel/preset-env for syntax transpilation only, with useBuiltIns: false. As the library option does not use global polyfills, you might want to transpile node_modules as well - see the absoluteRuntime option.

Closing notes

• Breaking Change: @babel/polyfill is deprecated starting with Babel 7.4.0.

• Legacy: If you can't switch to core-js@3, set corejs option to 2 (see migrations). Install @babel/runtime-corejs2 in case of option 2 (@babel/plugin-transform-runtime).

• Excellent summary in #9853 by Jovica Markoski

• Currently, the library approach doesn't take selective targets into account - meaning you take locally scoped polyfills at the price of bigger bundle size (including all polyfills).

• babel-polyfills is a new, experimental approach to inject different polyfills (not just core-js) with different strategies.

• This also allows to selectively include locally scoped polyfills.

For me worked:

module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
esmodules: true,
},
},
],
],
}