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?
javascript node.js babeljs
add a comment |
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 node.js babeljs
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00
add a comment |
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 node.js babeljs
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 node.js babeljs
javascript node.js babeljs
edited Jul 18 '17 at 21:45
loganfsmyth
102k20214183
102k20214183
asked Nov 4 '15 at 16:58
BrunoLM
59.5k66222383
59.5k66222383
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00
add a comment |
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00
add a comment |
26 Answers
26
active
oldest
votes
babel-polyfill
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 entry 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
67
Important when you are using babel with webpack: rather than usingrequire("babel-polyfill")
which is not working, you add"babel-polyfill"
into yourentry
in config, like this:entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.
– Cemen
Nov 21 '15 at 11:28
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
@LloyddevDependency
if you are using webpack because it will then "compile" the files before running.dependency
if you are not using webpack and you are requiring babel.
– BrunoLM
Feb 26 '16 at 20:20
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
|
show 12 more comments
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", {
"polyfill": false,
"regenerator": true
}]
]
}
10
I did not needbabel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)
– GijsjanB
Jul 26 '16 at 6:54
7
I also only had to installbabel-plugin-transform-runtime
(nobabel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.
– Marco Lazzeri
Oct 28 '16 at 14:52
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
onlybabel-plugin-transform-runtime
required. Works like a charm.
– saike
Dec 19 '16 at 16:38
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand therequire
calls that are added by thetransform-runtime
plugin.
– Finesse
Apr 19 '17 at 3:46
|
show 8 more comments
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.
2
This really works. The only downside is a bunch of dependencies pulled bybabel-preset-env
but I think it's worth it. Love the declarative style too. Alsoyarn install
is nowyarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
|
show 12 more comments
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
.
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
add a comment |
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"
]
}
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
Isloose: true
needed?
– Tom Söderlund
Aug 2 '18 at 8:32
add a comment |
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
]
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
add a comment |
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
add a comment |
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.
3
It's better to use presetenv
instead ofes2015
.env
includeses2015
already.
– TranslucentCloud
Apr 9 '18 at 20:11
add a comment |
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.
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
add a comment |
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.
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
add a comment |
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.
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
add a comment |
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"
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
add a comment |
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"]
]
}
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
add a comment |
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/
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
add a comment |
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
.
add a comment |
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
}]
]
}
add a comment |
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
add a comment |
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"
}
}
]
]
}
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).targets
seems to refer to this :the environments you support/target for your project
, whilsttargets.node
is this:if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed"stage-0"
in the process) and the regenerator error went away.
– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
|
show 1 more comment
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 add mocha --require babel-polyfill
option.
add a comment |
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>
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
add a comment |
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')],
add a comment |
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
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
add a comment |
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()
]
};
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise usingbabel-polyfill
would be the recommended solution.
– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
add a comment |
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
add a comment |
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
.
add a comment |
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" ]
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33527653%2fbabel-6-regeneratorruntime-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
26 Answers
26
active
oldest
votes
26 Answers
26
active
oldest
votes
active
oldest
votes
active
oldest
votes
babel-polyfill
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 entry 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
67
Important when you are using babel with webpack: rather than usingrequire("babel-polyfill")
which is not working, you add"babel-polyfill"
into yourentry
in config, like this:entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.
– Cemen
Nov 21 '15 at 11:28
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
@LloyddevDependency
if you are using webpack because it will then "compile" the files before running.dependency
if you are not using webpack and you are requiring babel.
– BrunoLM
Feb 26 '16 at 20:20
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
|
show 12 more comments
babel-polyfill
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 entry 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
67
Important when you are using babel with webpack: rather than usingrequire("babel-polyfill")
which is not working, you add"babel-polyfill"
into yourentry
in config, like this:entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.
– Cemen
Nov 21 '15 at 11:28
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
@LloyddevDependency
if you are using webpack because it will then "compile" the files before running.dependency
if you are not using webpack and you are requiring babel.
– BrunoLM
Feb 26 '16 at 20:20
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
|
show 12 more comments
babel-polyfill
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 entry 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
babel-polyfill
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 entry 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
edited Jan 18 '16 at 1:30
answered Nov 4 '15 at 17:10
BrunoLM
59.5k66222383
59.5k66222383
67
Important when you are using babel with webpack: rather than usingrequire("babel-polyfill")
which is not working, you add"babel-polyfill"
into yourentry
in config, like this:entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.
– Cemen
Nov 21 '15 at 11:28
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
@LloyddevDependency
if you are using webpack because it will then "compile" the files before running.dependency
if you are not using webpack and you are requiring babel.
– BrunoLM
Feb 26 '16 at 20:20
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
|
show 12 more comments
67
Important when you are using babel with webpack: rather than usingrequire("babel-polyfill")
which is not working, you add"babel-polyfill"
into yourentry
in config, like this:entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.
– Cemen
Nov 21 '15 at 11:28
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
@LloyddevDependency
if you are using webpack because it will then "compile" the files before running.dependency
if you are not using webpack and you are requiring babel.
– BrunoLM
Feb 26 '16 at 20:20
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
67
67
Important when you are using babel with webpack: rather than using
require("babel-polyfill")
which is not working, you add "babel-polyfill"
into your entry
in config, like this: entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.– Cemen
Nov 21 '15 at 11:28
Important when you are using babel with webpack: rather than using
require("babel-polyfill")
which is not working, you add "babel-polyfill"
into your entry
in config, like this: entry: ["babel-polyfill", "src/main.js"]
. This worked for me, including use in webpack-dev-server with HMR.– Cemen
Nov 21 '15 at 11:28
5
5
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
I was trying to get my mocha tests to run with babel6 and async and I had to add --require babel-polyfill to the npm test runner configuration
– arisalexis
Dec 14 '15 at 11:23
12
12
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
What's babel-register for?
– trusktr
Feb 9 '16 at 0:33
4
4
@Lloyd
devDependency
if you are using webpack because it will then "compile" the files before running. dependency
if you are not using webpack and you are requiring babel.– BrunoLM
Feb 26 '16 at 20:20
@Lloyd
devDependency
if you are using webpack because it will then "compile" the files before running. dependency
if you are not using webpack and you are requiring babel.– BrunoLM
Feb 26 '16 at 20:20
4
4
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
This makes the output file size huge... Better to use only what you need instead of requiring babel-polyfill directly.
– Inanc Gumus
Jun 8 '16 at 19:37
|
show 12 more comments
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", {
"polyfill": false,
"regenerator": true
}]
]
}
10
I did not needbabel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)
– GijsjanB
Jul 26 '16 at 6:54
7
I also only had to installbabel-plugin-transform-runtime
(nobabel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.
– Marco Lazzeri
Oct 28 '16 at 14:52
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
onlybabel-plugin-transform-runtime
required. Works like a charm.
– saike
Dec 19 '16 at 16:38
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand therequire
calls that are added by thetransform-runtime
plugin.
– Finesse
Apr 19 '17 at 3:46
|
show 8 more comments
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", {
"polyfill": false,
"regenerator": true
}]
]
}
10
I did not needbabel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)
– GijsjanB
Jul 26 '16 at 6:54
7
I also only had to installbabel-plugin-transform-runtime
(nobabel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.
– Marco Lazzeri
Oct 28 '16 at 14:52
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
onlybabel-plugin-transform-runtime
required. Works like a charm.
– saike
Dec 19 '16 at 16:38
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand therequire
calls that are added by thetransform-runtime
plugin.
– Finesse
Apr 19 '17 at 3:46
|
show 8 more comments
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", {
"polyfill": false,
"regenerator": true
}]
]
}
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", {
"polyfill": false,
"regenerator": true
}]
]
}
edited Dec 20 '18 at 13:56
JelteF
1,2901228
1,2901228
answered Apr 24 '16 at 10:34
johnny
2,9801129
2,9801129
10
I did not needbabel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)
– GijsjanB
Jul 26 '16 at 6:54
7
I also only had to installbabel-plugin-transform-runtime
(nobabel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.
– Marco Lazzeri
Oct 28 '16 at 14:52
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
onlybabel-plugin-transform-runtime
required. Works like a charm.
– saike
Dec 19 '16 at 16:38
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand therequire
calls that are added by thetransform-runtime
plugin.
– Finesse
Apr 19 '17 at 3:46
|
show 8 more comments
10
I did not needbabel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)
– GijsjanB
Jul 26 '16 at 6:54
7
I also only had to installbabel-plugin-transform-runtime
(nobabel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.
– Marco Lazzeri
Oct 28 '16 at 14:52
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
onlybabel-plugin-transform-runtime
required. Works like a charm.
– saike
Dec 19 '16 at 16:38
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand therequire
calls that are added by thetransform-runtime
plugin.
– Finesse
Apr 19 '17 at 3:46
10
10
I did not need
babel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)– GijsjanB
Jul 26 '16 at 6:54
I did not need
babel-runtime
to get async await working. Is that correct? Edit: I'm running the code server side. :)– GijsjanB
Jul 26 '16 at 6:54
7
7
I also only had to install
babel-plugin-transform-runtime
(no babel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.– Marco Lazzeri
Oct 28 '16 at 14:52
I also only had to install
babel-plugin-transform-runtime
(no babel-runtime
). - I believe this is the cleanest (more lightweight) solution for Webpack generated bundles.– Marco Lazzeri
Oct 28 '16 at 14:52
7
7
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
If you were able to use it without babel-runtime, it's because it's already in your dependency tree. So be aware that if you're writing a library, and babel-runtime is coming in as a dev dependency, it might not be there for your users. You will have to include it as a normal dependency for distribution.
– neverfox
Nov 1 '16 at 21:55
19
19
only
babel-plugin-transform-runtime
required. Works like a charm.– saike
Dec 19 '16 at 16:38
only
babel-plugin-transform-runtime
required. Works like a charm.– saike
Dec 19 '16 at 16:38
4
4
This solution is not OK because it requires an extra Browserify or Webpack job to expand the
require
calls that are added by the transform-runtime
plugin.– Finesse
Apr 19 '17 at 3:46
This solution is not OK because it requires an extra Browserify or Webpack job to expand the
require
calls that are added by the transform-runtime
plugin.– Finesse
Apr 19 '17 at 3:46
|
show 8 more comments
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.
2
This really works. The only downside is a bunch of dependencies pulled bybabel-preset-env
but I think it's worth it. Love the declarative style too. Alsoyarn install
is nowyarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
|
show 12 more comments
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.
2
This really works. The only downside is a bunch of dependencies pulled bybabel-preset-env
but I think it's worth it. Love the declarative style too. Alsoyarn install
is nowyarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
|
show 12 more comments
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.
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.
edited Dec 27 '17 at 5:46
answered Dec 26 '16 at 12:27
Tyler Long
10.4k46764
10.4k46764
2
This really works. The only downside is a bunch of dependencies pulled bybabel-preset-env
but I think it's worth it. Love the declarative style too. Alsoyarn install
is nowyarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
|
show 12 more comments
2
This really works. The only downside is a bunch of dependencies pulled bybabel-preset-env
but I think it's worth it. Love the declarative style too. Alsoyarn install
is nowyarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
2
2
This really works. The only downside is a bunch of dependencies pulled by
babel-preset-env
but I think it's worth it. Love the declarative style too. Also yarn install
is now yarn add
– Roman Usherenko
Jan 5 '17 at 22:32
This really works. The only downside is a bunch of dependencies pulled by
babel-preset-env
but I think it's worth it. Love the declarative style too. Also yarn install
is now yarn add
– Roman Usherenko
Jan 5 '17 at 22:32
1
1
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
@gargantuan Yes it does.
– Tyler Long
May 4 '17 at 13:18
2
2
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
Not really a solution if you want to target older browsers or node versions.
– Rohan Orton
Oct 16 '17 at 8:47
1
1
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
Just in case it is not obvious.... this recommended solution will NOT work if you need your code to work in IE11
– Maurice
Dec 24 '17 at 6:40
3
3
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
Why does this have so many up votes? This only works because it no longer transforms async/await and thus no longer needs the regeneratorRuntime and because it's not transformed it will not work on browsers that don't support it.
– Shikyo
Jun 9 '18 at 16:38
|
show 12 more comments
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
.
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
add a comment |
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
.
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
add a comment |
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
.
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
.
answered Apr 13 '16 at 7:01
Antony Mativos
606164
606164
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
add a comment |
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
This seems to be the most convenient solution. However, most browsers support generators, so this solution is probably not the optimal one. See: blogs.candoerz.com/question/213492/…
– Kitanotori
Jul 16 '16 at 20:27
add a comment |
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"
]
}
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
Isloose: true
needed?
– Tom Söderlund
Aug 2 '18 at 8:32
add a comment |
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"
]
}
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
Isloose: true
needed?
– Tom Söderlund
Aug 2 '18 at 8:32
add a comment |
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"
]
}
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"
]
}
edited Sep 3 '18 at 13:01
Jatimir
1,4631513
1,4631513
answered Jun 19 '17 at 15:09
E. Fortes
1,0071010
1,0071010
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
Isloose: true
needed?
– Tom Söderlund
Aug 2 '18 at 8:32
add a comment |
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
Isloose: true
needed?
– Tom Söderlund
Aug 2 '18 at 8:32
1
1
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
You're missing "transform-async-to-generator" in plugins. I had to add that as well to make it work
– GabrielBB
Mar 3 '18 at 3:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
@GabrielBB I've edited the post so it's a complete example.
– webnoob
Jun 14 '18 at 13:25
1
1
Is
loose: true
needed?– Tom Söderlund
Aug 2 '18 at 8:32
Is
loose: true
needed?– Tom Söderlund
Aug 2 '18 at 8:32
add a comment |
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
]
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
add a comment |
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
]
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
add a comment |
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
]
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
]
answered Jan 3 '18 at 13:53
jony89
1,9441422
1,9441422
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
add a comment |
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
This worked flawlessly for me...
– Van Dame
Mar 1 '18 at 19:16
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
That was it! Thanks!!! Didn't read the babel docs carefully :))
– thinklinux
Apr 26 '18 at 13:06
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
This should be the accepted answer, babel-polyfill adds way too much other stuff
– Shikyo
Jun 9 '18 at 16:43
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Saved my day, thank you!
– Nick
Jul 25 '18 at 3:33
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
Work perfect for me... Thanks a lot
– Leandro William
Oct 29 '18 at 14:42
add a comment |
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
add a comment |
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
add a comment |
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
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
answered Aug 19 '16 at 9:48
Zubair Alam
5,90511820
5,90511820
add a comment |
add a comment |
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.
3
It's better to use presetenv
instead ofes2015
.env
includeses2015
already.
– TranslucentCloud
Apr 9 '18 at 20:11
add a comment |
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.
3
It's better to use presetenv
instead ofes2015
.env
includeses2015
already.
– TranslucentCloud
Apr 9 '18 at 20:11
add a comment |
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.
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.
answered Jan 31 '18 at 5:21
Joshua Dyck
526512
526512
3
It's better to use presetenv
instead ofes2015
.env
includeses2015
already.
– TranslucentCloud
Apr 9 '18 at 20:11
add a comment |
3
It's better to use presetenv
instead ofes2015
.env
includeses2015
already.
– TranslucentCloud
Apr 9 '18 at 20:11
3
3
It's better to use preset
env
instead of es2015
. env
includes es2015
already.– TranslucentCloud
Apr 9 '18 at 20:11
It's better to use preset
env
instead of es2015
. env
includes es2015
already.– TranslucentCloud
Apr 9 '18 at 20:11
add a comment |
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.
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
add a comment |
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.
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
add a comment |
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.
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.
answered Apr 23 '18 at 4:33
Ally
3,06132638
3,06132638
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
add a comment |
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
2
2
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
a;kgjablrsdkjfjasnkljfbajklfdablkhjnfl;sad I was losing my mind and you have saved me I love you
– John R Perry
Oct 4 '18 at 10:39
add a comment |
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.
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
add a comment |
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.
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
add a comment |
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.
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.
edited May 23 '17 at 11:47
Community♦
11
11
answered Feb 27 '17 at 20:54
Galen Long
1,5531222
1,5531222
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
add a comment |
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
Did not work for me
– OverCoder
Jul 10 '17 at 18:11
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
But... I installed babel so I can use new browser features...
– Kokodoko
Jan 6 '18 at 11:20
add a comment |
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.
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
add a comment |
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.
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
add a comment |
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.
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.
edited Apr 14 '17 at 6:37
answered Apr 14 '17 at 5:50
MD Ashik
1,6761927
1,6761927
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
add a comment |
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
1
1
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
Why would he use webpack if it's a backend service? Your answer implies that he has to use webpack?
– Spock
Oct 6 '17 at 12:38
1
1
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
@Spock, I did think about it. I was facing same Problem and I solved my problem this simple way. I think it's Positive answer for Webpack user and hare have more Right Answer so you can follow anyother .
– MD Ashik
Oct 6 '17 at 22:37
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
Why you thing you need to press down Vote !!!! Can u say reason if u want to help me.
– MD Ashik
Aug 31 '18 at 19:01
add a comment |
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"
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
add a comment |
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"
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
add a comment |
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"
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"
edited Sep 8 '18 at 21:19
answered Dec 12 '17 at 13:41
Ayobami
6913
6913
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
add a comment |
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
add a comment |
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"]
]
}
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
add a comment |
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"]
]
}
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
add a comment |
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"]
]
}
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"]
]
}
edited Dec 12 '18 at 19:54
answered Dec 12 '18 at 4:27
Matt Shirley
601611
601611
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
add a comment |
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
Thanks for this one bro!
– Ali Briceño
Dec 31 '18 at 21:45
add a comment |
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/
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
add a comment |
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/
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
add a comment |
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/
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/
answered Jan 7 '17 at 12:10
Luisangonzalez
566
566
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
add a comment |
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
1
1
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
import 'babel-polyfill'; works
– Gaurav Sharma
Aug 17 '17 at 6:25
add a comment |
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
.
add a comment |
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
.
add a comment |
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
.
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
.
answered Aug 2 '18 at 9:27
Tom Söderlund
2,34312238
2,34312238
add a comment |
add a comment |
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
}]
]
}
add a comment |
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
}]
]
}
add a comment |
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
}]
]
}
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
}]
]
}
edited Oct 16 '18 at 1:43
answered Jul 31 '18 at 5:20
Qiulang
1,99922546
1,99922546
add a comment |
add a comment |
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
add a comment |
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
add a comment |
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
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
answered Oct 19 '18 at 21:35
Petros Kyriakou
2,48441745
2,48441745
add a comment |
add a comment |
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"
}
}
]
]
}
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).targets
seems to refer to this :the environments you support/target for your project
, whilsttargets.node
is this:if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed"stage-0"
in the process) and the regenerator error went away.
– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
|
show 1 more comment
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"
}
}
]
]
}
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).targets
seems to refer to this :the environments you support/target for your project
, whilsttargets.node
is this:if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed"stage-0"
in the process) and the regenerator error went away.
– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
|
show 1 more comment
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"
}
}
]
]
}
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"
}
}
]
]
}
answered Oct 26 '18 at 14:15
Zero
64678
64678
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).targets
seems to refer to this :the environments you support/target for your project
, whilsttargets.node
is this:if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed"stage-0"
in the process) and the regenerator error went away.
– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
|
show 1 more comment
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).targets
seems to refer to this :the environments you support/target for your project
, whilsttargets.node
is this:if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed"stage-0"
in the process) and the regenerator error went away.
– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
2
2
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
would please explain your answer ? what "node": "current" does
– Bunker Boy
Nov 13 '18 at 8:41
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).
targets
seems to refer to this : the environments you support/target for your project
, whilst targets.node
is this: if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
i'd also like to know what this does and if it is a recommended solution - ie it doesn't jeopardise anything and is "future proof" (as much as anything can be at the moment).
targets
seems to refer to this : the environments you support/target for your project
, whilst targets.node
is this: if you want to compile against the current node version, you can specify "node": true or "node": "current", which would be the same as "node": process.versions.node
– user1063287
Nov 13 '18 at 9:59
FWIW, i used the second block defined in the answer (and removed
"stage-0"
in the process) and the regenerator error went away.– user1063287
Nov 13 '18 at 10:33
FWIW, i used the second block defined in the answer (and removed
"stage-0"
in the process) and the regenerator error went away.– user1063287
Nov 13 '18 at 10:33
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
@BunkerBoy For convenience, you can use "node": "current" to only include the necessary polyfills and transforms for the Node.js version that you use to run Babel
– Zero
Nov 19 '18 at 0:18
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
so for this i don't have to install polyfills ?
– Bunker Boy
Nov 20 '18 at 8:29
|
show 1 more comment
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 add mocha --require babel-polyfill
option.
add a comment |
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 add mocha --require babel-polyfill
option.
add a comment |
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 add mocha --require babel-polyfill
option.
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 add mocha --require babel-polyfill
option.
answered Sep 7 '16 at 20:40
lakesare
6,29943247
6,29943247
add a comment |
add a comment |
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>
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
add a comment |
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>
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
add a comment |
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>
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>
answered Nov 20 '16 at 10:13
csharpfolk
2,8581219
2,8581219
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
add a comment |
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
Thank you. This worked for me. I didn't know that I needed to add the script tag for it to work in the client side.
– Raza
Dec 8 '16 at 21:04
add a comment |
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')],
add a comment |
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')],
add a comment |
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')],
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')],
answered Jan 17 '18 at 11:14
Adeel Imran
2,73111939
2,73111939
add a comment |
add a comment |
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
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
add a comment |
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
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
add a comment |
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
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
answered Dec 19 '17 at 13:08
Petros Kyriakou
2,48441745
2,48441745
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
add a comment |
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
stackoverflow.com/a/41331284/446267
– Малъ Скрылевъ
Dec 29 '17 at 13:22
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
I don't see why the downvote and comment. I wanted it for firefox browser. Also i took the info directly from babel website itself. The comment did not help me solve the issue when i tried it.
– Petros Kyriakou
Dec 30 '17 at 14:15
add a comment |
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()
]
};
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise usingbabel-polyfill
would be the recommended solution.
– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
add a comment |
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()
]
};
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise usingbabel-polyfill
would be the recommended solution.
– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
add a comment |
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()
]
};
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()
]
};
answered Dec 24 '17 at 6:56
Maurice
690615
690615
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise usingbabel-polyfill
would be the recommended solution.
– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
add a comment |
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise usingbabel-polyfill
would be the recommended solution.
– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise using
babel-polyfill
would be the recommended solution.– Maurice
Dec 24 '17 at 6:58
also for the record... I'm using this config for a plugin I'm building, not a full-blown application. otherwise using
babel-polyfill
would be the recommended solution.– Maurice
Dec 24 '17 at 6:58
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
The key is to enable regenerator for babel transform runtime, and that answer already is here below.
– Малъ Скрылевъ
Dec 29 '17 at 15:46
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
@МалъСкрылевъ Thx for the downvote... and for a suggestion that doesn't actually work. Enabling regenerator alone does NOT work when using RollUp. you need to specify the polyfill in your RollUp config.
– Maurice
Dec 30 '17 at 6:48
add a comment |
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
add a comment |
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
add a comment |
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
I have async await working with webpack/babel build:
"devDependencies": {
"babel-preset-stage-3": "^6.11.0"
}
.babelrc:
"presets": ["es2015", "stage-3"]
answered Jul 12 '16 at 1:12
msmfsd
303113
303113
add a comment |
add a comment |
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
.
add a comment |
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
.
add a comment |
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
.
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
.
answered Jul 20 '18 at 4:17
RienNeVaPlu͢s
3,96842562
3,96842562
add a comment |
add a comment |
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" ]
add a comment |
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" ]
add a comment |
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" ]
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" ]
answered Aug 11 '18 at 12:13
Anas Alpure
211
211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33527653%2fbabel-6-regeneratorruntime-is-not-defined%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you included regenerator?
– ssube
Nov 4 '15 at 17:08
babel-polyfill is what you need.
– Ron Royston
Dec 12 '18 at 5:00