Babel 6 regeneratorRuntime is not defined












436














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?










share|improve this question
























  • 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
















436














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?










share|improve this question
























  • 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














436












436








436


123





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?










share|improve this question















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



.babelrc file



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


package.json file



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


.js file



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


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







javascript node.js babeljs






share|improve this question















share|improve this question













share|improve this question




share|improve this question








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


















  • 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












26 Answers
26






active

oldest

votes


















530














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





share|improve this answer



















  • 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






  • 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




    @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




    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



















246














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





share|improve this answer



















  • 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








  • 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






  • 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




    only babel-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 the require calls that are added by the transform-runtime plugin.
    – Finesse
    Apr 19 '17 at 3:46



















87














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.






share|improve this answer



















  • 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








  • 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



















43














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.






share|improve this answer





















  • 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



















36














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





share|improve this answer



















  • 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




    Is loose: true needed?
    – Tom Söderlund
    Aug 2 '18 at 8:32



















12














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
]





share|improve this answer





















  • 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



















9














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






share|improve this answer





























    9














    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:





    1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:



      ...

      entry: ['babel-polyfill', './index.js'],

      ...



    2. 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.






    share|improve this answer

















    • 3




      It's better to use preset env instead of es2015. env includes es2015 already.
      – TranslucentCloud
      Apr 9 '18 at 20:11



















    9














    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.






    share|improve this answer

















    • 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



















    7














    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.






    share|improve this answer























    • 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



















    6














    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.






    share|improve this 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



















    6














    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"





    share|improve this answer























    • stackoverflow.com/a/41331284/446267
      – Малъ Скрылевъ
      Dec 29 '17 at 13:22



















    5














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





    share|improve this answer























    • Thanks for this one bro!
      – Ali Briceño
      Dec 31 '18 at 21:45



















    4














    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/






    share|improve this answer

















    • 1




      import 'babel-polyfill'; works
      – Gaurav Sharma
      Aug 17 '17 at 6:25



















    4














    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.






    share|improve this answer





























      4














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





      share|improve this answer































        3














        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






        share|improve this answer





























          3














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





          share|improve this answer

















          • 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, 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










          • @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














          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.






          share|improve this answer





























            2














            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>





            share|improve this answer





















            • 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



















            2














            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')],





            share|improve this answer





























              1














              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






              share|improve this answer





















              • 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





















              1














              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()

              ]
              };





              share|improve this answer





















              • 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










              • @МалъСкрылевъ 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



















              0














              I have async await working with webpack/babel build:



              "devDependencies": {
              "babel-preset-stage-3": "^6.11.0"
              }


              .babelrc:



              "presets": ["es2015", "stage-3"]





              share|improve this answer





























                0














                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.






                share|improve this answer





























                  0














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






                  share|improve this answer





















                    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
                    });


                    }
                    });














                    draft saved

                    draft discarded


















                    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









                    530














                    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





                    share|improve this answer



















                    • 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






                    • 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




                      @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




                      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
















                    530














                    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





                    share|improve this answer



















                    • 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






                    • 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




                      @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




                      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














                    530












                    530








                    530






                    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





                    share|improve this answer














                    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






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








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




                      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




                      @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




                      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




                      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




                      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




                      @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




                      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













                    246














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





                    share|improve this answer



















                    • 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








                    • 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






                    • 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




                      only babel-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 the require calls that are added by the transform-runtime plugin.
                      – Finesse
                      Apr 19 '17 at 3:46
















                    246














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





                    share|improve this answer



















                    • 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








                    • 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






                    • 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




                      only babel-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 the require calls that are added by the transform-runtime plugin.
                      – Finesse
                      Apr 19 '17 at 3:46














                    246












                    246








                    246






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





                    share|improve this answer














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






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








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




                      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




                      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




                      only babel-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 the require calls that are added by the transform-runtime plugin.
                      – Finesse
                      Apr 19 '17 at 3:46














                    • 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








                    • 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






                    • 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




                      only babel-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 the require calls that are added by the transform-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











                    87














                    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.






                    share|improve this answer



















                    • 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








                    • 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
















                    87














                    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.






                    share|improve this answer



















                    • 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








                    • 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














                    87












                    87








                    87






                    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.






                    share|improve this answer














                    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.







                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








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




                      @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




                      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




                      @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











                    43














                    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.






                    share|improve this answer





















                    • 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
















                    43














                    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.






                    share|improve this answer





















                    • 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














                    43












                    43








                    43






                    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.






                    share|improve this answer












                    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.







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    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


















                    • 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











                    36














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





                    share|improve this answer



















                    • 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




                      Is loose: true needed?
                      – Tom Söderlund
                      Aug 2 '18 at 8:32
















                    36














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





                    share|improve this answer



















                    • 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




                      Is loose: true needed?
                      – Tom Söderlund
                      Aug 2 '18 at 8:32














                    36












                    36








                    36






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





                    share|improve this answer














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






                    share|improve this answer














                    share|improve this answer



                    share|improve this answer








                    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




                      Is loose: true needed?
                      – Tom Söderlund
                      Aug 2 '18 at 8:32














                    • 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




                      Is loose: 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











                    12














                    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
                    ]





                    share|improve this answer





















                    • 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
















                    12














                    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
                    ]





                    share|improve this answer





















                    • 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














                    12












                    12








                    12






                    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
                    ]





                    share|improve this answer












                    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
                    ]






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    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


















                    • 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











                    9














                    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






                    share|improve this answer


























                      9














                      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






                      share|improve this answer
























                        9












                        9








                        9






                        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






                        share|improve this answer












                        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







                        share|improve this answer












                        share|improve this answer



                        share|improve this answer










                        answered Aug 19 '16 at 9:48









                        Zubair Alam

                        5,90511820




                        5,90511820























                            9














                            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:





                            1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:



                              ...

                              entry: ['babel-polyfill', './index.js'],

                              ...



                            2. 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.






                            share|improve this answer

















                            • 3




                              It's better to use preset env instead of es2015. env includes es2015 already.
                              – TranslucentCloud
                              Apr 9 '18 at 20:11
















                            9














                            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:





                            1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:



                              ...

                              entry: ['babel-polyfill', './index.js'],

                              ...



                            2. 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.






                            share|improve this answer

















                            • 3




                              It's better to use preset env instead of es2015. env includes es2015 already.
                              – TranslucentCloud
                              Apr 9 '18 at 20:11














                            9












                            9








                            9






                            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:





                            1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:



                              ...

                              entry: ['babel-polyfill', './index.js'],

                              ...



                            2. 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.






                            share|improve this answer












                            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:





                            1. As mentioned above many times, I needed to add babel-polyfill into my webpack entry array:



                              ...

                              entry: ['babel-polyfill', './index.js'],

                              ...



                            2. 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.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Jan 31 '18 at 5:21









                            Joshua Dyck

                            526512




                            526512








                            • 3




                              It's better to use preset env instead of es2015. env includes es2015 already.
                              – TranslucentCloud
                              Apr 9 '18 at 20:11














                            • 3




                              It's better to use preset env instead of es2015. env includes es2015 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











                            9














                            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.






                            share|improve this answer

















                            • 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
















                            9














                            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.






                            share|improve this answer

















                            • 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














                            9












                            9








                            9






                            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.






                            share|improve this answer












                            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.







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            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














                            • 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











                            7














                            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.






                            share|improve this answer























                            • 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
















                            7














                            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.






                            share|improve this answer























                            • 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














                            7












                            7








                            7






                            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.






                            share|improve this answer














                            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.







                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            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


















                            • 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











                            6














                            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.






                            share|improve this 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
















                            6














                            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.






                            share|improve this 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














                            6












                            6








                            6






                            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.






                            share|improve this 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.







                            share|improve this answer














                            share|improve this answer



                            share|improve this 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














                            • 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











                            6














                            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"





                            share|improve this answer























                            • stackoverflow.com/a/41331284/446267
                              – Малъ Скрылевъ
                              Dec 29 '17 at 13:22
















                            6














                            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"





                            share|improve this answer























                            • stackoverflow.com/a/41331284/446267
                              – Малъ Скрылевъ
                              Dec 29 '17 at 13:22














                            6












                            6








                            6






                            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"





                            share|improve this answer














                            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"






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            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


















                            • 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











                            5














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





                            share|improve this answer























                            • Thanks for this one bro!
                              – Ali Briceño
                              Dec 31 '18 at 21:45
















                            5














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





                            share|improve this answer























                            • Thanks for this one bro!
                              – Ali Briceño
                              Dec 31 '18 at 21:45














                            5












                            5








                            5






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





                            share|improve this answer














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






                            share|improve this answer














                            share|improve this answer



                            share|improve this answer








                            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


















                            • 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











                            4














                            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/






                            share|improve this answer

















                            • 1




                              import 'babel-polyfill'; works
                              – Gaurav Sharma
                              Aug 17 '17 at 6:25
















                            4














                            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/






                            share|improve this answer

















                            • 1




                              import 'babel-polyfill'; works
                              – Gaurav Sharma
                              Aug 17 '17 at 6:25














                            4












                            4








                            4






                            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/






                            share|improve this answer












                            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/







                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Jan 7 '17 at 12:10









                            Luisangonzalez

                            566




                            566








                            • 1




                              import 'babel-polyfill'; works
                              – Gaurav Sharma
                              Aug 17 '17 at 6:25














                            • 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











                            4














                            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.






                            share|improve this answer


























                              4














                              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.






                              share|improve this answer
























                                4












                                4








                                4






                                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.






                                share|improve this answer












                                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.







                                share|improve this answer












                                share|improve this answer



                                share|improve this answer










                                answered Aug 2 '18 at 9:27









                                Tom Söderlund

                                2,34312238




                                2,34312238























                                    4














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





                                    share|improve this answer




























                                      4














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





                                      share|improve this answer


























                                        4












                                        4








                                        4






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





                                        share|improve this answer














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






                                        share|improve this answer














                                        share|improve this answer



                                        share|improve this answer








                                        edited Oct 16 '18 at 1:43

























                                        answered Jul 31 '18 at 5:20









                                        Qiulang

                                        1,99922546




                                        1,99922546























                                            3














                                            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






                                            share|improve this answer


























                                              3














                                              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






                                              share|improve this answer
























                                                3












                                                3








                                                3






                                                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






                                                share|improve this answer












                                                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







                                                share|improve this answer












                                                share|improve this answer



                                                share|improve this answer










                                                answered Oct 19 '18 at 21:35









                                                Petros Kyriakou

                                                2,48441745




                                                2,48441745























                                                    3














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





                                                    share|improve this answer

















                                                    • 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, 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










                                                    • @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
















                                                    3














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





                                                    share|improve this answer

















                                                    • 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, 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










                                                    • @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














                                                    3












                                                    3








                                                    3






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





                                                    share|improve this answer












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






                                                    share|improve this answer












                                                    share|improve this answer



                                                    share|improve this answer










                                                    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, 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










                                                    • @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




                                                      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












                                                    • 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











                                                    2














                                                    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.






                                                    share|improve this answer


























                                                      2














                                                      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.






                                                      share|improve this answer
























                                                        2












                                                        2








                                                        2






                                                        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.






                                                        share|improve this answer












                                                        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.







                                                        share|improve this answer












                                                        share|improve this answer



                                                        share|improve this answer










                                                        answered Sep 7 '16 at 20:40









                                                        lakesare

                                                        6,29943247




                                                        6,29943247























                                                            2














                                                            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>





                                                            share|improve this answer





















                                                            • 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
















                                                            2














                                                            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>





                                                            share|improve this answer





















                                                            • 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














                                                            2












                                                            2








                                                            2






                                                            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>





                                                            share|improve this answer












                                                            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>






                                                            share|improve this answer












                                                            share|improve this answer



                                                            share|improve this answer










                                                            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


















                                                            • 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











                                                            2














                                                            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')],





                                                            share|improve this answer


























                                                              2














                                                              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')],





                                                              share|improve this answer
























                                                                2












                                                                2








                                                                2






                                                                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')],





                                                                share|improve this answer












                                                                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')],






                                                                share|improve this answer












                                                                share|improve this answer



                                                                share|improve this answer










                                                                answered Jan 17 '18 at 11:14









                                                                Adeel Imran

                                                                2,73111939




                                                                2,73111939























                                                                    1














                                                                    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






                                                                    share|improve this answer





















                                                                    • 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


















                                                                    1














                                                                    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






                                                                    share|improve this answer





















                                                                    • 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
















                                                                    1












                                                                    1








                                                                    1






                                                                    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






                                                                    share|improve this answer












                                                                    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







                                                                    share|improve this answer












                                                                    share|improve this answer



                                                                    share|improve this answer










                                                                    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




















                                                                    • 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













                                                                    1














                                                                    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()

                                                                    ]
                                                                    };





                                                                    share|improve this answer





















                                                                    • 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










                                                                    • @МалъСкрылевъ 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
















                                                                    1














                                                                    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()

                                                                    ]
                                                                    };





                                                                    share|improve this answer





















                                                                    • 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










                                                                    • @МалъСкрылевъ 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














                                                                    1












                                                                    1








                                                                    1






                                                                    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()

                                                                    ]
                                                                    };





                                                                    share|improve this answer












                                                                    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()

                                                                    ]
                                                                    };






                                                                    share|improve this answer












                                                                    share|improve this answer



                                                                    share|improve this answer










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










                                                                    • @МалъСкрылевъ 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










                                                                    • 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











                                                                    0














                                                                    I have async await working with webpack/babel build:



                                                                    "devDependencies": {
                                                                    "babel-preset-stage-3": "^6.11.0"
                                                                    }


                                                                    .babelrc:



                                                                    "presets": ["es2015", "stage-3"]





                                                                    share|improve this answer


























                                                                      0














                                                                      I have async await working with webpack/babel build:



                                                                      "devDependencies": {
                                                                      "babel-preset-stage-3": "^6.11.0"
                                                                      }


                                                                      .babelrc:



                                                                      "presets": ["es2015", "stage-3"]





                                                                      share|improve this answer
























                                                                        0












                                                                        0








                                                                        0






                                                                        I have async await working with webpack/babel build:



                                                                        "devDependencies": {
                                                                        "babel-preset-stage-3": "^6.11.0"
                                                                        }


                                                                        .babelrc:



                                                                        "presets": ["es2015", "stage-3"]





                                                                        share|improve this answer












                                                                        I have async await working with webpack/babel build:



                                                                        "devDependencies": {
                                                                        "babel-preset-stage-3": "^6.11.0"
                                                                        }


                                                                        .babelrc:



                                                                        "presets": ["es2015", "stage-3"]






                                                                        share|improve this answer












                                                                        share|improve this answer



                                                                        share|improve this answer










                                                                        answered Jul 12 '16 at 1:12









                                                                        msmfsd

                                                                        303113




                                                                        303113























                                                                            0














                                                                            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.






                                                                            share|improve this answer


























                                                                              0














                                                                              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.






                                                                              share|improve this answer
























                                                                                0












                                                                                0








                                                                                0






                                                                                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.






                                                                                share|improve this answer












                                                                                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.







                                                                                share|improve this answer












                                                                                share|improve this answer



                                                                                share|improve this answer










                                                                                answered Jul 20 '18 at 4:17









                                                                                RienNeVaPlu͢s

                                                                                3,96842562




                                                                                3,96842562























                                                                                    0














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






                                                                                    share|improve this answer


























                                                                                      0














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






                                                                                      share|improve this answer
























                                                                                        0












                                                                                        0








                                                                                        0






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






                                                                                        share|improve this answer












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







                                                                                        share|improve this answer












                                                                                        share|improve this answer



                                                                                        share|improve this answer










                                                                                        answered Aug 11 '18 at 12:13









                                                                                        Anas Alpure

                                                                                        211




                                                                                        211






























                                                                                            draft saved

                                                                                            draft discarded




















































                                                                                            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.




                                                                                            draft saved


                                                                                            draft discarded














                                                                                            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





















































                                                                                            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







                                                                                            Popular posts from this blog

                                                                                            Bressuire

                                                                                            Vorschmack

                                                                                            Quarantine