Babel 7 - ReferenceError: regeneratorRuntime is not defined

Question

I have an application that is a node backend and a react frontend.

I get the following error when i try to build/run my node application.

Node: v10.13.0

Error:

dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { ^

ReferenceError: regeneratorRuntime is not defined

.babelrc

{     "presets": [    [         "@babel/preset-env", {           "targets": {             "node": "current"           },         }       ], "@babel/preset-react"],     "plugins": [         "@babel/plugin-proposal-class-properties"     ] } 

webpack.config.js

{         mode: "development",         entry: "./src/index.js",         target: "node",         externals: [nodeExternals()], // in order to ignore all modules in node_modules folder         stats: {             colors: true         },         devtool: "source-map",          output: {             path: path.resolve(__dirname, "dist"),             filename: "index.js",             sourceMapFilename: "index.js.map"         },         module: {             rules: [                 {                     enforce: "pre",                     test: /\.js$/,                     exclude: /node_modules/,                     loader: "eslint-loader",                 },                 {                     test: /\.m?js$/,                     exclude: /(node_modules|bower_components)/,                     use: {                         loader: "babel-loader",                         options: {                             presets: ["@babel/preset-env"]                         }                     }                 }             ],         },         node: {             __dirname: false,             __filename: false,         },          "plugins": [             new CleanWebpackPlugin(),             new WebpackShellPlugin({                 onBuildStart: [],                 onBuildEnd: ["nodemon dist/index.js"]             }),          ]      }, 

package.json

 "dependencies": {     "connect": "^3.6.6",     "cors": "^2.8.5",     "dotenv": "^6.1.0",     "express": "^4.16.4",     "hellojs": "^1.17.1",     "i18n-iso-countries": "^3.7.8",     "morgan": "^1.9.1",     "react": "^16.6.3",     "react-dom": "^16.6.3",     "request": "^2.88.0",     "request-promise-native": "^1.0.5",     "serve-static": "^1.13.2",     "vhost": "^3.0.2"   },   "devDependencies": {     "@babel/cli": "^7.1.5",     "@babel/core": "^7.1.6",     "@babel/plugin-proposal-class-properties": "^7.1.0",     "@babel/preset-env": "^7.1.6",     "@babel/preset-react": "^7.0.0",     "babel-eslint": "^10.0.1",     "babel-loader": "^8.0.4",     "clean-webpack-plugin": "^1.0.0",     "copy-webpack-plugin": "^4.6.0",     "css-loader": "^1.0.1",     "eslint": "^5.9.0",     "eslint-config-google": "^0.10.0",     "eslint-loader": "^2.1.1",     "eslint-plugin-react": "^7.11.1",     "extract-loader": "^3.0.0",     "file-loader": "^2.0.0",     "node-sass": "^4.10.0",     "sass-loader": "^7.1.0",     "style-loader": "^0.23.1",     "webpack": "^4.26.0",     "webpack-cli": "^3.1.2",     "webpack-node-externals": "^1.7.2",     "webpack-shell-plugin": "^0.5.0"   } 

Answer 1

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.

Answer 2

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.