Uncaught ReferenceError: regeneratorRuntime is not defined in React

Question

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

Answer 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

Answer 2

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

Answer 3

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...

• Babel 6 regeneratorRuntime is not defined
• Babel 7 - ReferenceError: regeneratorRuntime is not defined

Following actions helped:

1. 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" }

2. 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...

Answer 4

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.

Answer 5

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.

Answer 6

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.