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

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

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?

Answer : Diagram machinery works also for perturbation theory in classical statistical mechanics and classical field theories. Generally, various kinds of diagrams constitute a pictorial way of talking about tensor products and their contractions while hiding the multi-linear algebra from the layman. In the simplest case, vertices (or blobs) represent vectors, matrices, tensors; vertices have ingoing and/or outgoing ports; ingoing ports denote (contravariant) ro indices; outgoing ports denote (covariant) co indices; directed arcs between blobs give a pair of equal indices summed over; different base spaces ⇔ \Leftrightarrow ⇔ different arc types; symmetric tensors ⇔ \Leftrightarrow ⇔ undirected diagrams; no labels are needed for internal lines. In many cases, the directed arcs are decorated (as thin, thick, broken,wavy, curly lines), each decoration indicating the presence of a so-called propagator, a function of its label to use as a weight in the sum, which may beco
Read more