Babel 6 regeneratorRuntime is not defined
Javascriptnode.jsBabeljsJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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
Solution 2 - Javascript
>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
}]
]
}
Solution 3 - Javascript
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"]
]
}
Solution 4 - Javascript
Update
It works if you set the target to Chrome. But it might not work for other targets, please refer to: https://github.com/babel/babel-preset-env/issues/112
So this answer is NOT quite proper for the original question. I will keep it here as a reference to babel-preset-env
.
A simple solution is to add import 'babel-polyfill'
at the beginning of your code.
If you use webpack, a quick solution is to add babel-polyfill
as shown below:
entry: {
index: ['babel-polyfill', './index.js']
}
I believe I've found the latest best practice.
Check this project: https://github.com/babel/babel-preset-env
yarn add --dev babel-preset-env
Use the following as your babel configuration:
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 Chrome versions"]
}
}]
]
}
Then your app should be good to go in the last 2 versions of Chrome browser.
You can also set Node as the targets or fine-tune the browsers list according to https://github.com/ai/browserslist
Tell me what, don't tell me how.
I really like babel-preset-env
's philosophy: tell me which environment you want to support, do NOT tell me how to support them. It's the beauty of declarative programming.
I've tested async
await
and they DO work. I don't know how they work and I really don't want to know. I want to spend my time on my own code and my business logic instead. Thanks to babel-preset-env
, it liberates me from the Babel configuration hell.
Solution 5 - Javascript
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).
@babel/preset-env
Option 1: 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
@babel/transform-runtime
with @babel/runtime
Option 2: 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
).
Solution 6 - Javascript
Alternatively, if you don't need all the modules babel-polyfill
provides, you can just specify babel-regenerator-runtime
in your webpack config:
module.exports = {
entry: ['babel-regenerator-runtime', './test.js'],
// ...
};
When using webpack-dev-server with HMR, doing this reduced the number of files it has to compile on every build by quite a lot. This module is installed as part of babel-polyfill
so if you already have that you're fine, otherwise you can install it separately with npm i -D babel-regenerator-runtime
.
Solution 7 - Javascript
My simple solution:
npm install --save-dev babel-plugin-transform-runtime
npm install --save-dev babel-plugin-transform-async-to-generator
.babelrc
{
"presets": [
["latest", {
"es2015": {
"loose": true
}
}],
"react",
"stage-0"
],
"plugins": [
"transform-runtime",
"transform-async-to-generator"
]
}
Solution 8 - Javascript
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'],
};
Solution 9 - Javascript
babel-regenerator-runtime
is now deprecated, instead one should use regenerator-runtime
.
To use the runtime generator with webpack
and babel
v7:
install regenerator-runtime
:
npm i -D regenerator-runtime
And then add within webpack configuration :
entry: [
'regenerator-runtime/runtime',
YOUR_APP_ENTRY
]
Solution 10 - Javascript
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"
}
}
]
]
}
Solution 11 - Javascript
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
Solution 12 - Javascript
Be careful of hoisted functions
I had both my 'polyfill import' and my 'async function' in the same file, however I was using the function syntax that hoists it above the polyfill which would give me the ReferenceError: regeneratorRuntime is not defined
error.
Change this code
import "babel-polyfill"
async function myFunc(){ }
to this
import "babel-polyfill"
var myFunc = async function(){}
to prevent it being hoisted above the polyfill import.
Solution 13 - Javascript
If using babel-preset-stage-2
then just have to start the script with --require babel-polyfill
.
In my case this error was thrown by Mocha
tests.
Following fixed the issue
mocha \"server/tests/**/*.test.js\" --compilers js:babel-register --require babel-polyfill
Solution 14 - Javascript
I had this problem in Chrome. Similar to RienNeVaPlu͢s’s answer, this solved it for me:
npm install --save-dev regenerator-runtime
Then in my code:
import 'regenerator-runtime/runtime';
Happy to avoid the extra 200 kB from babel-polyfill
.
Solution 15 - Javascript
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,
},
},
],
],
}
Solution 16 - Javascript
You're getting an error because async/await use generators, which are an ES2016 feature, not ES2015. One way to fix this is to install the babel preset for ES2016 (npm install --save babel-preset-es2016
) and compile to ES2016 instead of ES2015:
"presets": [
"es2016",
// etc...
]
As the other answers mention, you can also use polyfills (though make sure you load the polyfill first before any other code runs). Alternatively, if you don't want to include all of the polyfill dependencies, you can use the babel-regenerator-runtime or the babel-plugin-transform-runtime.
Solution 17 - Javascript
I started getting this error after converting my project into a typescript project. From what I understand, the problem stems from async/await not being recognized.
For me the error was fixed by adding two things to my setup:
-
As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:
...
entry: ['babel-polyfill', './index.js'],
...
-
I needed to update my .babelrc to allow the complilation of async/await into generators:
{ "presets": ["es2015"], "plugins": ["transform-async-to-generator"] }
###DevDependencies: I had to install a few things into my devDependencies in my package.json file as well. Namely, I was missing the babel-plugin-transform-async-to-generator, babel-polyfill and the babel-preset-es2015:
"devDependencies": {
"babel-loader": "^6.2.2",
"babel-plugin-transform-async-to-generator": "^6.5.0",
"babel-polyfill": "^6.5.0",
"babel-preset-es2015": "^6.5.0",
"webpack": "^1.12.13"
}
###Full Code Gist:
I got the code from a really helpful and concise GitHub gist you can find here.
Solution 18 - Javascript
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"
Solution 19 - Javascript
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
Solution 20 - Javascript
New Answer Why you follow my answer ?
Ans: Because I am going to give you a answer with latest Update version npm project .
04/14/2017
"name": "es6",
"version": "1.0.0",
"babel-core": "^6.24.1",
"babel-loader": "^6.4.1",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^2.3.3",
"webpack-dev-server": "^2.4.2"
If your Use this version or more UP version of Npm and all other ... SO just need to change :
webpack.config.js
module.exports = {
entry: ["babel-polyfill", "./app/js"]
};
After change webpack.config.js
files Just add this line to top of your code .
import "babel-polyfill";
Now check everything is ok. Reference LINK
Also Thanks @BrunoLM for his nice Answer.
Solution 21 - Javascript
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
}]
]
}
Solution 22 - Javascript
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";
....
Solution 23 - Javascript
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
Solution 24 - Javascript
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
Solution 25 - Javascript
I get this error using gulp with rollup when I tried to use ES6 generators:
gulp.task('scripts', () => {
return rollup({
entry: './app/scripts/main.js',
format: "iife",
sourceMap: true,
plugins: [babel({
exclude: 'node_modules/**',
"presets": [
[
"es2015-rollup"
]
],
"plugins": [
"external-helpers"
]
}),
includePaths({
include: {},
paths: ['./app/scripts'],
external: [],
extensions: ['.js']
})]
})
.pipe(source('app.js'))
.pipe(buffer())
.pipe(sourcemaps.init({
loadMaps: true
}))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('.tmp/scripts'))
.pipe(reload({ stream: true }));
});
I may case the solution was to include babel-polyfill
as bower component:
bower install babel-polyfill --save
and add it as dependency in index.html:
<script src="/bower_components/babel-polyfill/browser-polyfill.js"></script>
Solution 26 - Javascript
1 - Install babel-plugin-transform-async-to-module-method, babel-polyfil, bluebird , babel-preset-es2015, babel-core :
npm install babel-plugin-transform-async-to-module-method babel-polyfill bluebird babel-preset-es2015 babel-core
2 - Add in your js babel polyfill:
import 'babel-polyfill';
3 - Add plugin in your .babelrc:
{
"presets": ["es2015"],
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}
Source : http://babeljs.io/docs/plugins/transform-async-to-module-method/
Solution 27 - Javascript
For people looking to use the babel-polyfill
version 7^ do this with webpack
ver3^.
Npm install the module npm i -D @babel/polyfill
Then in your webpack
file in your entry
point do this
entry: ['@babel/polyfill', path.resolve(APP_DIR, 'App.js')],
Solution 28 - Javascript
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
Solution 29 - Javascript
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
Solution 30 - Javascript
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'));
...
Solution 31 - Javascript
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"],
};
Solution 32 - Javascript
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!
Solution 33 - Javascript
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.
Solution 34 - Javascript
try to add this to your package.json
"browserslist": [
"last 2 Chrome versions"
]
that worked for me!
Solution 35 - Javascript
If you using Gulp + Babel for a frontend you need to use babel-polyfill
npm install babel-polyfill
and then add a script tag to index.html above all other script tags and reference babel-polyfill from node_modules
Solution 36 - Javascript
Most of these answers recommend solutions for dealing with this error using WebPack. But in case anyone is using RollUp (like I am), here is what finally worked for me (just a heads-up and bundling this polyfill ads about 10k tot he output size):
.babelrc
{
"presets": [
[
"env",
{
"modules": false,
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["external-helpers",
[
"transform-runtime",
{
"polyfill": false,
"regenerator": true
}
]]
}
rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import uglify from 'rollup-plugin-uglify';
import commonjs from 'rollup-plugin-commonjs';
export default {
input: 'src/entry.js',
output: {
file: 'dist/bundle.js',
format: 'umd',
name: 'MyCoolLib',
exports: 'named'
},
sourcemap: true,
plugins: [
commonjs({
// polyfill async/await
'node_modules/babel-runtime/helpers/asyncToGenerator.js': ['default']
}),
resolve(),
babel({
runtimeHelpers: true,
exclude: 'node_modules/**', // only transpile our source code
}),
uglify()
]
};
Solution 37 - Javascript
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.
Solution 38 - Javascript
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.
Solution 39 - Javascript
Just install:
npm install --save-dev @babel/plugin-transform-runtime
and add it to the plugins array of Babel.
Solution 40 - Javascript
- Install
@babel-polyfill
and save it in your dev dependencies
npm install --save-dev @babel/polyfill
- Copy and Paste
require("@babel/polyfill");
at the top your entry file
Entry.js
require("@babel/polyfill"); // this should be include at the top
3. Add @babel/polyfill in the entry array
- 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'
}
Solution 41 - Javascript
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
Solution 42 - Javascript
-
Install babel-polyfill
npm install --save @babel/polyfill
-
Update webpack file
entry: ["@babel/polyfill", "<your enter js file>"]
Solution 43 - Javascript
In a scenario where a custom babelHelpers.js
file is created using babel.buildExternalHelpers()
with babel-plugin-external-helpsers
I figured the least costly solution for the client is to prepend the regenerator-runtime/runtime.js
to the output instead of all polyfills.
// runtime.js
npm install --save regenerator-runtime
// building the custom babelHelper.js
fs.writeFile(
'./babelHelpers.js',
fs.readFileSync('node_modules/regenerator-runtime/runtime.js')
+ '\n'
+ require('babel-core').buildExternalHelpers()
)
This solution comes down to about 20 KB instead of ~230 KB when including babel-polyfill
.
Solution 44 - Javascript
i had regeneratorRuntime is not defined error when i used 'async' and 'await' in my react app 'async' and 'await' is a new keywords in ES7 for that you should use babel-preset-es2017 install this devDependencies:
> "babel-preset-es2017": "^6.24.1", > "babel-preset-react": "^6.24.1", > "babel-preset-stage-0": "^6.24.1",
and use this
"presets": [ "es2017" , "stage-0" , "react" ]
Solution 45 - Javascript
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
Solution 46 - Javascript
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
Solution 47 - Javascript
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.
Solution 48 - Javascript
import 'babel-polyfill'
where you using async await