'Uncaught ReferenceError: regeneratorRuntime is not defined in React

I'm getting an error "Uncaught ReferenceError: regeneratorRuntime is not defined". Please help me to find out the error and how to resolve it.

Solution 1:^[1]

Install the runtime dependency

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

Add the plugin to your .babelrc file

{
  "plugins": ["@babel/plugin-transform-runtime"]
}

More Info: https://babeljs.io/docs/en/babel-plugin-transform-runtime

TLDR;

Async functions are abstraction on top of generators.
Async functions and generators are now supported in all major browsers and in Node10 and upwards.
If you are using a transpiler (such as babel) for backwards compatibility, you would need an extra "layer" that transforms generators. This implies transforming ES6 into ES5 at runtime since their syntax isn't backwards compatible. See https://cmichel.io/how-are-generators-transpiled-to-es5

Solution 2:^[2]

Thanks It works when I add an import statement -- import regeneratorRuntime from "regenerator-runtime"; in the component i am using async/await.

Solution 3:^[3]

just add

  "browserslist": [
    "last 2 Chrome versions"
  ]

at the end of your projects package.json file, also see that its plural browsers not browser!

Your file in the end might look something like this ->

  },
  "dependencies": {
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

ignore the dependency section in the above code view, its just for reference on how your package.json might look.

Solution 4:^[4]

2022

If you're working with Babel 7 or later version, you don't need to install an extra plugin (neither @babel/plugin-transform-runtime or @babel/plugin-transform-regenerator or other plugins).

Later, you have to include this statement every time you're using async/await syntax.

import regeneratorRuntime from "regenerator-runtime";

Maybe if you have set a linter in your project it will warning you about that statement is declared but its value is never read, but I think is just an error, because if you delete it the code doesn't work.

Solution 5:^[5]

Ran into this problem (using Babel v7) and even after following the advice and installing relevant packages, I was still unable to get id of this error. following stack overflow posts were checked...

Following actions helped:

Go to package.json & add the following inside 'jest' (screenshot added also):

"moduleNameMapper": {
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" }

when running a test use the following suffix in the command...

--setupFilesAfterEnv "./src/setupTests.js"

so to run a test, it will be:

$ jest /pathToTest/TestFile.test.js --setupFilesAfterEnv "./src/setupTests.js"

Hope it helps someone like it helped me...

Solution 6:^[6]

If it's really necessary for you to use the async function then the solutions above should work. Another way to resolve this is to use regular promises, at least that was in my case.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Julian Tellez
Solution 2	punjira
Solution 3	Alphons Jaimon
Solution 4	hectormb
Solution 5	Akber Iqbal
Solution 6	Dejan Ignjatovic

'Uncaught ReferenceError: regeneratorRuntime is not defined in React

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]