CODEWITHSUNDEEP
reactjswebpackbabeljsbabel-loader
ABC
ABC

Reputation: 763

Babel 7 - Uncaught ReferenceError: regeneratorRuntime is not defined

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

enter image description here

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?

Upvotes: 1

Views: 5319

Answers (3)

Ismael Antonio
Ismael Antonio

Reputation: 141

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

Upvotes: 9

Daniel
Daniel

Reputation: 411

{ "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

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

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

Upvotes: 2

ABC
ABC

Reputation: 763

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.

Upvotes: 0

Related Questions