27

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

enter image description here

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
Abhijeet
  • 588
  • 1
  • 4
  • 18
  • 1
    That's an issue with babel config. See more: https://stackoverflow.com/questions/53477466/react-referenceerror-regeneratorruntime-is-not-defined – maten May 12 '20 at 15:55
  • module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], }; -- this code is in my babel.config.js file and whenever I add plugins and sourceMap into it my nodemon stops working show app crashed waiting for file changes before starting and when I remove the plugin, modemon will starts working and then server is running.. – Abhijeet May 12 '20 at 18:46
  • @Akber this doesn't seem to be related to testing, and the correct tag for the JavaScript test framework is [tag:jestjs]. – jonrsharpe Oct 23 '20 at 10:21

7 Answers7

51
  • 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
Julian Tellez
  • 802
  • 7
  • 6
11

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

punjira
  • 818
  • 8
  • 21
Abhijeet
  • 588
  • 1
  • 4
  • 18
6

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.

Alphons Jaimon
  • 61
  • 1
  • 2
  • 1
    This worked for me, was just looking for a quick solution, was already using Babel 7 like other have mentioned – VladNeacsu Mar 26 '22 at 12:45
5

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.

hectormb
  • 136
  • 2
  • 2
  • You might still need plugins in babel 7 if, like me, you're getting the error because of third-party modules that apparently decided to add async in a minor revision update. :D – tekHedd Oct 28 '22 at 22:27
0

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:

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

enter image description here

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

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
0

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.

Dejan Ignjatovic
  • 76
  • 1
  • 4
0

In my case when i do import "core-js/stable"; import "regenerator-runtime/runtime"; on the top and install it's dependies it works good .

AMAN KUMAR
  • 1
  • 1
  • 1