Babel 7 - Uncaught ReferenceError: regeneratorRuntime is not defined

Question

I'm getting the error Uncaught ReferenceError: regeneratorRuntime is not defined using React with webpack and Babel .

I've followed this answer by defining my .babel.rc as:

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

and running:

npm i --save-dev @babel/plugin-transform-runtime

However, I get the exact same error afterwards. I've also followed this other answer and this one, but still get the exact same error.

My babel specific installations in package.json are as follows:

  "dependencies": {
    "@babel/runtime": "^7.14.6"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5"
  }

Any ideas?

Ismael Antonio · Answer 1 · 2022-10-23T13:58:12.510

6

hey I ran into the same problem and I am using Babel 7, for me I installed 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"]
  ]
}

and this solved my problem

edited Oct 23 '22 at 13:58

answered Oct 14 '21 at 20:33

Ismael Antonio

81
1
6

Is the closing curly bracket missing? – Will Lanni Oct 20 '22 at 01:26
@WillLanni The closing bracket was separated from the code, but I just fixed it now. – Ismael Antonio Oct 23 '22 at 14:00

Daniel · Answer 2 · 2021-12-15T19:18:15.843

{ "presets": [ [ "@babel/preset-env", { "targets": { "node": "9.2.1" } } ], "@babel/preset-react" ] }

This is my file .babelrc

Look:

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

your problemes:

You are using "@ babel / preset-env" you must specify the version of node to compile. "node> 7.6". I recommend 10.

Why node > 7.6 Node.js 7.6 has shipped with official support for async/await enabled by default and better performance on low-memory devices.

How do you specify the version: It's simple

targets.node string | "current".

If you want to compile against the current node version, you can specify "node": "current", which would be the same as "node": process.versions.node.

AND FOR ME LOOK LIKE THIS:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "9.2.1"
        }
      }
    ],
    "@babel/preset-react"
  ]
}

This allows the compiler to understand ASYNC AWAIT, hope it helps you!

You can also add a plugin to handle your "asyc away"

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator

ATTENTION - > This Config is for node-js; it is just a example

score 0 · Answer 3 · answered Jul 17 '21 at 18:18

This ended up working for me:

How to allow async functions in React + Babel?

My problem was that I was defining the babel plugin in both my .babel.rc file and my webpack.config.js file. I needed to remove that plugin from my webpack.config.js and simply use it only in my .babel.rc file. Then it worked well.

Babel 7 - Uncaught ReferenceError: regeneratorRuntime is not defined

3 Answers3