Babel 7 - ReferenceError: RegeneratorRuntime Is Not Defined


Answer :

Updated Answer:

If you are using Babel 7.4.0 or newer, then @babel/polyfill has been deprecated. Instead, you will want to use the following at the top of your main js file (likely index.js or similar):

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

Install these packages either with npm:

npm install --save core-js npm install --save regenerator-runtime

or with yarn:

yarn add core-js yarn add regenerator-runtime

Original Answer:

I just encountered this problem and came across the following solution:

In package.json I had @babel/polyfill as a dependency. However, in my index.js (My main js file) I had neglected to place the following line at the the top:

import '@babel/polyfill'

Once I imported it, everything worked fine.

I did not need to install babel-runtime as other answers are suggesting.


There is already a very good answer here (originally posted on the Babel6 question) which I will just translate to Yarn. Basically, you need babel runtime (NOT as a dev dependency) and the plugin transform-runtime

yarn add @babel/runtime  yarn add -D @babel/plugin-transform-runtime

And, in .babelrc, add:

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

Babel 7.4.0 and later

There are two main configurations - one for apps and one for libraries.

Option 1: App

When to use: ✔ for applications ✔ global scope polyfills ✔ smallest bundle size ✔ selective inclusion via targets ✔ No need to process node_modules for polyfills

"presets": [   [     "@babel/preset-env",     {       "useBuiltIns": "usage", // alternative mode: "entry"       "corejs": 3, // default would be 2       "targets": "> 0.25%, not dead"        // set your own target environment here (see Browserslist)     }   ] ]
Install dependencies: 
npm i --save-dev @babel/preset-env  npm i regenerator-runtime core-js // run-time dependencies // regenerator-runtime: transform (async) generators and `async`/`await` // core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-env selectively includes polyfills for targets, specified by a Browserslist query. There are two modes - try usage first (more convenient), else entry (more flexible and robust):

  • useBuiltIns 'usage': no need to import anything manually. All polyfills are added automatically based on their code usage in a file.

  • useBuiltIns 'entry': Add these import entries once (!) in your app - akin to @babel/polyfill:

    import "regenerator-runtime/runtime"; import "core-js/stable"; // or more selective import, like "core-js/es/array"

Extension

For advanced cases, you might use @babel/transform-runtime (dev) and @babel/runtime (run-time) only for Babel helpers to reduce bundle size a bit more - called helper aliasing.

Option 2: Library

When to use: ✔ for libraries ✔ no global scope pollution ✔ includes all polyfills, not selective ✔ bigger bundle size neglectable

"plugins": [   [     "@babel/plugin-transform-runtime",     {       "regenerator": true,       "corejs": 3     }   ] ]
Install compile-time and run-time dependencies: 
npm i --save-dev @babel/plugin-transform-runtime // only for build phase  npm i @babel/runtime // runtime babel helpers + just regenerator runtime // OR (choose one!) npm i @babel/runtime-corejs3  // also contains other JS polyfills (not only regenerator runtime) // depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

See @babel/plugin-transform-runtime, @babel/runtime, @babel/runtime-corejs.

Extension

You can additionally use @babel/preset-env for syntax transpilation only, with useBuiltIns: false. As the library option does not use global polyfills, you might want to transpile node_modules as well - see the absoluteRuntime option.

Closing notes

  • Breaking Change: @babel/polyfill is deprecated starting with Babel 7.4.0.

  • Legacy: If you can't switch to core-js@3, set corejs option to 2 (see migrations). Install @babel/runtime-corejs2 in case of option 2 (@babel/plugin-transform-runtime).

  • Excellent summary in #9853 by Jovica Markoski

  • Currently, the library approach doesn't take selective targets into account - meaning you take locally scoped polyfills at the price of bigger bundle size (including all polyfills).

  • babel-polyfills is a new, experimental approach to inject different polyfills (not just core-js) with different strategies.

  • This also allows to selectively include locally scoped polyfills.


Comments

Post a Comment

Popular posts from this blog

Chemistry - Bond Angles In NH3 And NCl3

Answer : Solution 1: As Tan Yong Boon stated, it is Bent’s Rule with which we can explain the lower bond angle of \ce N F 3 \ce{NF3} \ce NF 3 when compared to \ce N H 3 \ce{NH3} \ce N H 3 . The rule as stated by Henry Bent: Atomic s character concentrates in orbitals directed towards electropositive substituents. Fluorine is more electronegative that hydrogen, and the \ce N − F \ce{N−F} \ce N − F bond would have greater p character than the \ce N − H \ce{N−H} \ce N − H bond. And more s character leads to large bond angles. Thus, the bond angle is greater in \ce N H 3 \ce{NH3} \ce N H 3 than in \ce N F 3 \ce{NF3} \ce NF 3 . Now, consider \ce N C l 3 \ce{NCl3} \ce NCl 3 . Clearly, \ce C l \ce{Cl} \ce Cl atom islarger in size than the central atom, nitrogen. Hence the higher bond angle here is due to the steric crowding caused by \ce C l \ce{Cl} \ce Cl atoms.(More pronounced than the electrongativity of \ce C l \ce{Cl} \ce Cl atom). They repel eachother and hence b...
Read more

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Answer : VACUUM is only needed on updated or deleted rows in non-temporary tables. Obviously you're doing lots of INSERTs but it's not obvious from the description that you're also doing lots of UPDATEs or DELETEs. These operations can be tracked with the pg_stat_all_tables view, specifically the n_tup_upd and n_tup_del columns. Also, even more to the point, there is a n_dead_tup column that tells, per table, how much rows need to be vacuumed. (see Monitoring statistics in the doc for functions and views related to statistics gathering). A possible strategy in your case would be to suppress the scheduled VACUUM, keeping an eye on this view and checking on which tables the n_dead_tup is going up significantly. Then apply the aggressive VACUUM to these tables only. This will be a win if there are large tables whose rows never get deleted nor updated and the aggressive VACUUM is really necessary only on smaller tables. But keep running the ANALYZE for the optimiz...
Read more

Change The Font Size Of Visual Studio Solution Explorer

Answer : Go to Tools->Options->Environment->Fonts and Colors In "Show Settings for" chose "Environment Font" In "Font" replace Automatic to for example, Arial and change size. Change the font size of that setting, all Font size in the Explorers (Solution Explorer, Server Explorer and Toolbox) and menus will change. You can set that in Tools, Options.
Read more