CODEWITHSUNDEEP
javascriptnode.jsbabeljs
BrunoLM
BrunoLM

Reputation: 100312

Babel 6 regeneratorRuntime is not defined

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?

Upvotes: 829

Views: 776573

Answers (30)

ybahtiar
ybahtiar

Reputation: 31

try to add this to your package.json

"browserslist": [
  "last 2 Chrome versions"
]

that worked for me!

Upvotes: 3

subhajit das
subhajit das

Reputation: 445

import 'babel-polyfill'

where you using async await

Upvotes: 1

k1eran
k1eran

Reputation: 4972

I used tip from https://github.com/babel/babel/issues/9849#issuecomment-592668815 and added targets: { esmodules: true,} to my babel.config.js.

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

Upvotes: 14

Mahdy H.
Mahdy H.

Reputation: 191

If you are using next js, add import regeneratorRuntime from "regenerator-runtime"; to the file that is raising the error, for me, the file was _document.js.

and add

[
  "@babel/plugin-transform-regenerator",
  {
    "asyncGenerators": false,
    "generators": false,
    "async": false
  }
]

in plugins, inside .babelrc file.

Upvotes: 4

johnny
johnny

Reputation: 5097

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
    }]
  ]
}

Upvotes: 440

Dmitry
Dmitry

Reputation: 183

  1. Install babel-polyfill npm install --save @babel/polyfill

  2. Update webpack file entry: ["@babel/polyfill", "<your enter js file>"]

Upvotes: 1

STEPS KEITA
STEPS KEITA

Reputation: 51

  1. Install @babel-polyfill and save it in your dev dependencies

npm install --save-dev @babel/polyfill

  1. Copy and Paste require("@babel/polyfill"); at the top your entry file

Entry.js

require("@babel/polyfill"); // this should be include at the top

  1. Add @babel/polyfill in the entry array

  2. You need preset-env in your preset array

webpack.config.js

const path =  require('path');
require("@babel/polyfill"); // necesarry

module.exports = {
  entry: ['@babel/polyfill','./src/js/index.js'],
  output: {
    path: path.resolve(__dirname, 'to_be_deployed/js'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },

  mode: 'development'
}

Upvotes: 2

fmi21
fmi21

Reputation: 545

Alternatively, if you are not using a bundler like webpack or rollup, you could as a workaround just import the contents of https://raw.githubusercontent.com/facebook/regenerator/master/packages/regenerator-runtime/runtime.js using a plain old script tag in your index.html.

Not optimal, but in my case the only solution.

Upvotes: 0

Dilip Tarkhala
Dilip Tarkhala

Reputation: 194

Just install regenerator-runtime with below command

npm i regenerator-runtime

add below line in startup file before you require server file

require("regenerator-runtime/runtime");

So far this has been working for me

Upvotes: 6

Hilal Aissani
Hilal Aissani

Reputation: 735

Just install:

npm install --save-dev @babel/plugin-transform-runtime

and add it to the plugins array of Babel.

Upvotes: 2

The gates of Zion
The gates of Zion

Reputation: 311

There are so many answers up there, I will post my answer for my reference. I use webpack and react, here is my solution without the .babelrc file

I am working on this in Aug 2020

Install react and babel

npm i @babel/core babel-loader @babel/preset-env @babel/preset-react react react-dom @babel/plugin-transform-runtime --save-dev

Then in my webpack.config.js

// other stuff
module.exports = {
// other stuff

   module: {
   rules: [
  
   {
    test: /\.m?js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env',"@babel/preset-react"],
        plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime'],
        //npm install --save-dev @babel/plugin-transform-runtime
          }
        }
      },
    ],
  },

};

I just don't know why I dont need to install the async package for the moment

Upvotes: 8

ford04
ford04

Reputation: 74460

Update: The Babel 7 post also has a more in-depth answer.

Babel 7.4.0 or later (core-js 2 / 3)

As of Babel 7.4.0, @babel/polyfill is deprecated.

In general, there are two ways to install polyfills/regenerator: via global namespace (Option 1) or as ponyfill (Option 2, without global pollution).

Option 1: @babel/preset-env

presets: [
  ["@babel/preset-env", {
    "useBuiltIns": "usage",
    "corejs": 3, // or 2,
    "targets": {
        "firefox": "64", // or whatever target to choose .    
    },
  }]
]

will automatically use regenerator-runtime and core-js according to your target. No need to import anything manually. Don't forget to install runtime dependencies:

npm i --save regenerator-runtime core-js

Alternatively, set useBuiltIns: "entry" and import it manually:

import "regenerator-runtime/runtime";
import "core-js/stable"; // if polyfills are also needed

Option 2: @babel/transform-runtime with @babel/runtime

This alternative has no global scope pollution and is suitable for libraries.

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true,
        "corejs": 3 // or 2; if polyfills needed
        ...
      }
    ]
  ]
}
Install it: 
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime

If corejs polyfill is used, you replace @babel/runtime with @babel/runtime-corejs2 (for "corejs": 2) or @babel/runtime-corejs3 (for "corejs": 3).

Upvotes: 92

Evgenia Karunus
Evgenia Karunus

Reputation: 11202

I had a setup
with webpack using presets: ['es2015', 'stage-0']
and mocha that was running tests compiled by webpack.

To make my async/await in tests work all I had to do is use mocha with the --require babel-polyfill option:

mocha --require babel-polyfill

Upvotes: 5

BrunoLM
BrunoLM

Reputation: 100312

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

Upvotes: 757

Cat Perry
Cat Perry

Reputation: 1042

This error is caused when async/await functions are used without the proper Babel plugins. As of March 2020, the following should be all you need to do. (@babel/polyfill and a lot of the accepted solutions have been deprecated in Babel. Read more in the Babel docs.)

In the command line, type:

npm install --save-dev @babel/plugin-transform-runtime

In your babel.config.js file, add this plugin @babel/plugin-transform-runtime. Note: The below example includes the other presets and plugins I have for a small React/Node/Express project I worked on recently:

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
  plugins: ['@babel/plugin-proposal-class-properties', 
  '@babel/plugin-transform-runtime'],
};

Upvotes: 43

Charles
Charles

Reputation: 255

Using stage-2 preset before react preset helped me:

npx babel --watch src --out-dir . --presets stage-2,react

The above code works when the following modules are installed:

npm install babel-cli babel-core babel-preset-react babel-preset-stage-2 --save-dev

Upvotes: 0

Jackie Santana
Jackie Santana

Reputation: 1458

Easiest way to fix this 'regeneratorRuntime not defined issue' in your console:

You don't have to install any unnecessary plugins. Just add:

<script src="https://unpkg.com/[email protected]/runtime.js"></script>

inside of the body in your index.html. Now regeneratorRuntime should be defined once you run babel and now your async/await functions should be compiled successfully into ES2015

Upvotes: 6

nickbullock
nickbullock

Reputation: 6589

In 2019 with Babel 7.4.0+, babel-polyfill package has been deprecated in favor of directly including core-js/stable (core-js@3+, to polyfill ECMAScript features) and regenerator-runtime/runtime (needed to use transpiled generator functions):

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

Information from babel-polyfill documentation.

Upvotes: 2

Sharath Mohan
Sharath Mohan

Reputation: 118

for future reference :

As of Babel version 7.0.0-beta.55 stage presets have been removed

refer blog https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets

async await can be still be used by

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator#usage

installation

npm install --save-dev @babel/plugin-transform-async-to-generator

usage in .babelrc

 { 
     "presets": ["@babel/preset-env"],
     "plugins": ["@babel/plugin-transform-async-to-generator"]
 }

and using babel polyfill https://babeljs.io/docs/en/babel-polyfill

installation 

npm install --save @babel/polyfill

webpack.config.js

module.exports = {
  entry: ["@babel/polyfill", "./app/js"],
};

Upvotes: 4

Deke
Deke

Reputation: 4639

As of Oct 2019 this worked for me:

Add this to the preset. 

 "presets": [
      "@babel/preset-env"
    ]

Then install regenerator-runtime using npm.

npm i regenerator-runtime

And then in your main file use: (this import is used only once)

import "regenerator-runtime/runtime";

This is will enable you to use async awaits in your file and remove the regenerator error

Upvotes: 15

ShatrdWing
ShatrdWing

Reputation: 509

This solution is out of date.

I found the solution in the youtube comments of this video https://www.youtube.com/watch?v=iWUR04B42Hc&lc=Ugyq8UJq-OyOzsKIIrB4AaABAg

This should direct to the correct comment. Much props to "beth w" for finding the solution.

Beth W 3 months ago (edited)
Another change I had to make in 2019 - babel no longer uses the stage-0 preset as of v7 apparently, so at 26:15 instead of 'npm install --save-dev babel-polyfill babel-preset-stage-0', I had to do:

npm install --save @babel/polyfill

Which covers both of the older options. Then, in the entry point for the app I > included '@babel/polyfill', and in the query presets I left it as-is. So the webpack config ends up looking like: 

const path = require('path');
module.exports = {
    entry: {
        app: ['@babel/polyfill', './src/app.js']
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    mode: 'development',
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['@babel/preset-env']
            }
        }]
    }
}

Hope that helps someone!

Upvotes: 3

Aaron Miller
Aaron Miller

Reputation: 185

I am using a React and Django project and got it to work by using regenerator-runtime. You should do this because @babel/polyfill will increase your app's size more and is also deprecated. I also followed this tutorial's episode 1 & 2 to create my project's structure.

*package.json*

...
"devDependencies": {
    "regenerator-runtime": "^0.13.3",
    ...
}

.babelrc

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

index.js

...
import regeneratorRuntime from "regenerator-runtime";
import "regenerator-runtime/runtime";
ReactDOM.render(<App />, document.getElementById('app'));
...

Upvotes: 4

gazdagergo
gazdagergo

Reputation: 6691

My working babel 7 boilerplate for react with regenerator runtime:

.babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": true,
        },
      },
    ],
    "@babel/preset-react",
  ],
  "plugins": [
    "@babel/plugin-syntax-class-properties",
    "@babel/plugin-proposal-class-properties"
  ]
}

package.json

...

"devDependencies": {
  "@babel/core": "^7.0.0-0",
  "@babel/plugin-proposal-class-properties": "^7.4.4",
  "@babel/plugin-syntax-class-properties": "^7.2.0",
  "@babel/polyfill": "^7.4.4",
  "@babel/preset-env": "^7.4.5",
  "@babel/preset-react": "^7.0.0",
  "babel-eslint": "^10.0.1",
...

main.js

import "@babel/polyfill";

....

Upvotes: 6

helsont
helsont

Reputation: 4952

I was encountering this issue when trying to run Mocha + Babel. I had a .babelrc that worked in development (see the other answers here, they are pretty complete), but my npm run test command was still complaining about regeneratorRuntime is not defined. So I modified my package.json:

"scripts": {
  "test": "mocha --require babel-polyfill --require babel-core/register tests/*.js"
}

Read more: https://babeljs.io/en/setup/#mocha-4

Upvotes: 0

kyw
kyw

Reputation: 7535

If you are building an app, you just need the @babel/preset-env and @babel/polyfill:

npm i -D @babel/preset-env
npm i @babel/polyfill

(Note: you don't need to install the core-js and regenerator-runtime packages because they both will have been installed by the @babel/polyfill)

Then in .babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry"  // this is the key. use 'usage' for further codesize reduction, but it's still 'experimental'
      }
    ]
  ]
}

Now set your target environments. Here, we do it in the .browserslistrc file:

# Browsers that we support

>0.2%
not dead
not ie <= 11
not op_mini all

Finally, if you went with useBuiltIns: "entry", put import @babel/polyfill at the top of your entry file. Otherwise, you are done.

Using this method will selectively import those polyfills and the 'regenerator-runtime' file(fixing your regeneratorRuntime is not defined issue here) ONLY if they are needed by any of your target environments/browsers.

Upvotes: 2

Matt Shirley
Matt Shirley

Reputation: 4215

Babel 7 Users

I had some trouble getting around this since most information was for prior babel versions. For Babel 7, install these two dependencies:

npm install --save @babel/runtime 
npm install --save-dev @babel/plugin-transform-runtime

And, in .babelrc, add:

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

Upvotes: 336

Zero
Zero

Reputation: 1152

Update your .babelrc file according to the following examples, it will work.

If you are using @babel/preset-env package

{
  "presets": [
    [
      "@babel/preset-env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}
or if you are using babel-preset-env package

{
  "presets": [
    [
      "env", {
        "targets": {
          "node": "current"
        }
      }
    ]
  ]
}

Upvotes: 20

Petros Kyriakou
Petros Kyriakou

Reputation: 5343

To babel7 users and ParcelJS >= 1.10.0 users

npm i @babel/runtime-corejs2
npm i --save-dev @babel/plugin-transform-runtime @babel/core

.babelrc

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

taken from https://github.com/parcel-bundler/parcel/issues/1762

Upvotes: 5

Qiulang
Qiulang

Reputation: 12395

The targeted browsers I need to support already support async/await, but when writing mocha tests, without the proper setting I still got this error.

Most of the articles I googled are outdated, including the accepted answer and high voted answers here, i.e. you don't need polyfill, babel-regenerator-runtime, babel-plugin-transform-runtime. etc. if your target browser(s) already supports async/await (of course if not you need polyfill)

I don't want to use webpack either.

Tyler Long's answer is actually on the right track since he suggested babel-preset-env (but I omitted it first as he mentioned polifill at the beginning). I still got the ReferenceError: regeneratorRuntime is not defined at the first then I realized it was because I didn't set the target. After setting the target for node I fix the regeneratorRuntime error：

  "scripts": {
    //"test": "mocha --compilers js:babel-core/register"
    //https://github.com/mochajs/mocha/wiki/compilers-deprecation
    "test": "mocha --require babel-core/register"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "mocha": "^5.2.0"
  },
  //better to set it .bablerc, I list it here for brevity and it works too.
  "babel": {
    "presets": [
      ["env",{
        "targets": {
          "node": "current"
           "chrome": 66,
           "firefox": 60,
        },
        "debug":true
      }]
    ]
  }

Upvotes: 6

Ayobami
Ayobami

Reputation: 146

I fixed this error by installing babel-polyfill

npm install babel-polyfill --save

then I imported it in my app entry point

import http from 'http';
import config from 'dotenv';
import 'babel-polyfill';
import { register } from 'babel-core';
import app from '../app';

for testing I included --require babel-polyfill in my test script

"test": "export NODE_ENV=test|| SET NODE_ENV=test&& mocha --compilers 
  js:babel-core/register --require babel-polyfill server/test/**.js --exit"

Upvotes: 9

Related Questions