Babel 6 regeneratorRuntime is not defined

Question

I'm trying to use async/await from scratch on Babel 6, but I'm getting regeneratorRuntime is not defined.

.babelrc file

{     "presets": [ "es2015", "stage-0" ] } 

package.json file

"devDependencies": {     "babel-core": "^6.0.20",     "babel-preset-es2015": "^6.0.15",     "babel-preset-stage-0": "^6.0.15" } 

.js file

"use strict"; async function foo() {   await bar(); } function bar() { } exports.default = foo; 

Using it normally without the async/await works just fine. Any ideas what I'm doing wrong?

Answer 1

Note If you're using babel 7, the package has been renamed to @babel/plugin-transform-runtime.

Besides polyfill, I use babel-plugin-transform-runtime. The plugin is described as:

Externalize references to helpers and builtins, automatically polyfilling your code without polluting globals. What does this actually mean though? Basically, you can use built-ins such as Promise, Set, Symbol etc as well use all the Babel features that require a polyfill seamlessly, without global pollution, making it extremely suitable for libraries.

It also includes support for async/await along with other built-ins of ES 6.

$ npm install --save-dev babel-plugin-transform-runtime 

In .babelrc, add the runtime plugin

{   "plugins": [     ["transform-runtime", {       "regenerator": true     }]   ] } 

Answer 2

babel-polyfill (deprecated as of Babel 7.4) is required. You must also install it in order to get async/await working.

npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader 

package.json

"devDependencies": {   "babel-core": "^6.0.20",   "babel-polyfill": "^6.0.16",   "babel-preset-es2015": "^6.0.15",   "babel-preset-stage-0": "^6.0.15" } 

.babelrc

{   "presets": [ "es2015", "stage-0" ] } 

.js with async/await (sample code)

"use strict";  export default async function foo() {   var s = await bar();   console.log(s); }  function bar() {   return "bar"; } 

In the startup file

require("babel-core/register"); require("babel-polyfill"); 

If you are using webpack you need to put it as the first value of your entry array in your webpack configuration file (usually webpack.config.js), as per @Cemen comment:

module.exports = {   entry: ['babel-polyfill', './test.js'],    output: {     filename: 'bundle.js'          },    module: {     loaders: [       { test: /\.jsx?$/, loader: 'babel', }     ]   } }; 

If you want to run tests with babel then use:

mocha --compilers js:babel-core/register --require babel-polyfill