Babel 6 regeneratorRuntime is not defined

Question

I m trying to use async  await from scratch on Babel 6  but I m getting regeneratorRuntime is not defined    babelrc file         presets      es2015    stage-0        package json file   devDependencies          babel-core     6 0 20        babel-preset-es2015     6 0 15        babel-preset-stage-0     6 0 15       js file   use strict   async function foo       await bar      function bar       exports default   foo    Using it normally without the async await works just fine  Any ideas what I m doing wrong

User · Answer

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

*package.json*

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

.babelrc

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

index.js

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

User · Answer

As of Oct 2019 this worked for me   Add this to the preset      presets             babel preset-env          Then install regenerator-runtime using npm   npm i regenerator-runtime   And then in your main file use   this import is used only once   import  regenerator-runtime runtime     This is will enable you to use async awaits in your file and remove the regenerator error

User · 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 use mocha with the --require babel-polyfill option  mocha --require babel-polyfill

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

User · Answer

Easiest way to fix this  regeneratorRuntime not defined issue  in your console   You don t have to install any unnecessary plugins  Just add    lt script src  https   unpkg com regenerator-runtime 0 13 1 runtime js  gt  lt  script gt   inside of the body in your index html   Now regeneratorRuntime should be defined once you run babel and now your async await functions should be compiled successfully into ES2015

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

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

User · Answer

In 2019 with Babel 7 4 0   babel-polyfill package has been deprecated in favor of directly including core-js stable  core-js 3   to polyfill ECMAScript features  and regenerator-runtime runtime  needed to use transpiled generator functions    import  core-js stable   import  regenerator-runtime runtime     Information from babel-polyfill documentation

User · Answer

I have async await working with webpack babel build    devDependencies          babel-preset-stage-3     6 11 0       babelrc    presets     es2015    stage-3

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

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

User · Answer

Alternatively  if you are not using a bundler like webpack or rollup  you could as a workaround just import the contents of https   raw githubusercontent com facebook regenerator master packages regenerator-runtime runtime js using a plain old script tag in your index html  Not optimal  but in my case the only solution

User · Answer

I was encountering this issue when trying to run Mocha   Babel  I had a  babelrc that worked in development  see the other answers here  they are pretty complete   but my npm run test command was still complaining about regeneratorRuntime is not defined  So I modified my package json    scripts        test    mocha --require babel-polyfill --require babel-core register tests   js      Read more  https   babeljs io en setup  mocha-4

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

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

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

User · Answer

Install babel-polyfill npm install --save  babel polyfill  Update webpack file entry    quot  babel polyfill quot    quot  lt your enter js file gt  quot

User · 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    As mentioned above many times  I needed to add babel-polyfill into my webpack entry array        entry    babel-polyfill      index js         I needed to update my  babelrc to allow the complilation of async await into generators        presets     es2015       plugins     transform-async-to-generator       DevDependencies   I had to install a few things into my devDependencies in my package json file as well  Namely  I was missing the babel-plugin-transform-async-to-generator  babel-polyfill and the babel-preset-es2015     devDependencies          babel-loader     6 2 2        babel-plugin-transform-async-to-generator     6 5 0        babel-polyfill     6 5 0        babel-preset-es2015     6 5 0        webpack     1 12 13       Full Code Gist   I got the code from a really helpful and concise GitHub gist you can find here

User · Answer

for future reference    As of Babel version 7 0 0-beta 55 stage presets have been removed  refer blog https   babeljs io blog 2018 07 27 removing-babels-stage-presets  async await can be still be used by  https   babeljs io docs en babel-plugin-transform-async-to-generator usage  installation  npm install --save-dev  babel plugin-transform-async-to-generator   usage in  babelrc            presets      babel preset-env          plugins      babel plugin-transform-async-to-generator        and using babel polyfill https   babeljs io docs en babel-polyfill  installation   npm install --save  babel polyfill   webpack config js  module exports       entry     babel polyfill      app js

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

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

User · Answer

This error is caused when async await functions are used without the proper Babel plugins  As of March 2020  the following should be all you need to do    babel polyfill and a lot of the accepted solutions have been deprecated in Babel  Read more in the Babel docs     In the command line  type   npm install --save-dev  babel plugin-transform-runtime   In your babel config js file  add this plugin  babel plugin-transform-runtime  Note  The below example includes the other presets and plugins I have for a small React Node Express project I worked on recently   module exports       presets     babel preset-react     babel preset-env      plugins     babel plugin-proposal-class-properties        babel plugin-transform-runtime

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

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

User · Answer

Install  babel-polyfill and save it in your dev dependencies   x000D   x000D  npm install --save-dev  babel polyfill x000D   x000D   x000D    Copy and Paste require  quot  babel polyfill quot    at the top your entry file  Entry js require  quot  babel polyfill quot       this should be include at the top   Add  babel polyfill in the entry array  You need preset-env in your preset array   webpack config js  x000D   x000D  const path    require  path    require   babel polyfill       necesarry  module exports       entry     babel polyfill     src js index js      output        path  path resolve   dirname   to be deployed js        filename   main js         module        rules                    test     m js            exclude   node modules           use              loader   babel-loader             options                presets     babel preset-env                                               mode   development    x000D   x000D   x000D

User · Answer

I get this error using gulp with rollup when I tried to use ES6 generators   gulp task  scripts        gt      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    lt script src   bower components babel-polyfill browser-polyfill js  gt  lt  script gt

User · Answer

Update  The Babel 7 post also has a more in-depth answer   Babel 7 4 0 or later  core-js 2   3  As of Babel 7 4 0   babel polyfill is deprecated  In general  there are two ways to install polyfills regenerator  via global namespace  Option 1  or as ponyfill  Option 2  without global pollution    Option 1   babel preset-env presets        quot  babel preset-env quot          quot useBuiltIns quot    quot usage quot        quot corejs quot   3     or 2       quot targets quot              quot firefox quot    quot 64 quot      or whatever target to choose                      will automatically use regenerator-runtime and core-js according to your target  No need to import anything manually  Don t forget to install runtime dependencies  npm i --save regenerator-runtime core-js  Alternatively  set useBuiltIns   quot entry quot  and import it manually  import  quot regenerator-runtime runtime quot   import  quot core-js stable quot      if polyfills are also needed   Option 2   babel transform-runtime with  babel runtime This alternative has no global scope pollution and is suitable for libraries       quot plugins quot                  quot  babel plugin-transform-runtime quot                    quot regenerator quot   true           quot corejs quot   3    or 2  if polyfills needed                                  Install it  npm i -D  babel plugin-transform-runtime npm i  babel runtime  If corejs polyfill is used  you replace  babel runtime with  babel runtime-corejs2  for  quot corejs quot   2  or  babel runtime-corejs3  for  quot corejs quot   3

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

User · Answer

My working babel 7 boilerplate for react with regenerator runtime    babelrc       presets                   babel preset-env                    targets                node   true                                   babel preset-react           plugins           babel plugin-syntax-class-properties         babel plugin-proposal-class-properties          package json        devDependencies         babel core     7 0 0-0       babel plugin-proposal-class-properties     7 4 4       babel plugin-syntax-class-properties     7 2 0       babel polyfill     7 4 4       babel preset-env     7 4 5       babel preset-react     7 0 0      babel-eslint     10 0 1         main js  import   babel polyfill

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

User · Answer

babel-polyfill  deprecated as of Babel 7 4  is required  You must also install it in order to get async await working   npm i -D babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-loader   package json   devDependencies        babel-core     6 0 20      babel-polyfill     6 0 16      babel-preset-es2015     6 0 15      babel-preset-stage-0     6 0 15       babelrc       presets      es2015    stage-0         js with async await  sample code    use strict    export default async function foo       var s   await bar      console log s      function bar       return  bar       In the startup file  require  babel-core register    require  babel-polyfill      If you are using webpack you need to put it as the first value of your entry array in your webpack configuration file  usually webpack config js   as per  Cemen comment   module exports       entry    babel-polyfill      test js       output        filename   bundle js                 module        loaders            test     jsx     loader   babel                    If you want to run tests with babel then use   mocha --compilers js babel-core register --require babel-polyfill

User · 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 amp  amp  mocha --compilers    js babel-core register --require babel-polyfill server test    js --exit

User · Answer

If you are building an app  you just need the  babel preset-env and  babel polyfill   npm i -D  babel preset-env npm i  babel polyfill    Note  you don t need to install the core-js and regenerator-runtime packages because they both will have been installed by the  babel polyfill   Then in  babelrc        presets                   babel preset-env                    useBuiltIns    entry      this is the key  use  usage  for further codesize reduction  but it s still  experimental                        Now set your target environments  Here  we do it in the  browserslistrc file     Browsers that we support   gt 0 2  not dead not ie  lt   11 not op mini all   Finally  if you went with useBuiltIns   entry   put import  babel polyfill at the top of your entry file  Otherwise  you are done   Using this method will selectively import those polyfills and the  regenerator-runtime  file fixing your regeneratorRuntime is not defined issue here  ONLY if they are needed by any of your target environments browsers

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

User · 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            regenerator   true                   Note   If you re using babel 7  the package has been renamed to  babel plugin-transform-runtime

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

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

User · Answer

Just install  npm install --save-dev  babel plugin-transform-runtime  and add it to the plugins array of Babel

User · Answer

Just install regenerator-runtime with below command npm i regenerator-runtime  add below line in startup file before you require server file require  quot regenerator-runtime runtime quot     So far this has been working for me

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

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

User · Answer

There are so many answers up there  I will post my answer for my reference  I use webpack and react  here is my solution without the  babelrc file I am working on this in Aug 2020 Install react and babel npm i  babel core babel-loader  babel preset-env  babel preset-react react react-dom  babel plugin-transform-runtime --save-dev  Then in my webpack config js    other stuff module exports        other stuff     module       rules                test     m js        exclude    node modules bower components        use          loader   babel-loader         options            presets     babel preset-env   quot  babel preset-react quot            plugins     babel plugin-proposal-class-properties     babel plugin-transform-runtime              npm install --save-dev  babel plugin-transform-runtime                                                 I just don t know why I dont need to install the async package for the moment

User · Answer

Using stage-2 preset before react preset helped me   npx babel --watch src --out-dir   --presets stage-2 react   The above code works when the following modules are installed   npm install babel-cli babel-core babel-preset-react babel-preset-stage-2 --save-dev

User · Answer

This solution is out of date   I found the solution in the youtube comments of this video https   www youtube com watch v iWUR04B42Hc amp lc Ugyq8UJq-OyOzsKIIrB4AaABAg  This should direct to the correct comment  Much props to  beth w  for finding the solution      Beth W 3 months ago  edited    Another change I had to make in 2019 - babel no longer uses the stage-0 preset as of v7 apparently  so at  26 15 instead of  npm install --save-dev babel-polyfill babel-preset-stage-0   I had to do       npm install --save  babel polyfill      Which covers both of the older options   Then  in the entry point for the app I   included   babel polyfill   and in the query presets I left it as-is   So the webpack config ends up looking like     const path   require  path    module exports         entry            app     babel polyfill      src app js              output            path  path resolve   dirname   build            filename   app bundle js             mode   development       module            rules                 test     js                 exclude   node modules               loader   babel-loader               query                    presets     babel preset-env                                         Hope that helps someone

[javascript] Babel 6 regeneratorRuntime is not defined

Examples related to javascript

Examples related to node.js

Examples related to babeljs