Uncaught ReferenceError: regeneratorRuntime is not defined in React

reactjs frontend react-functional-component
Abhijeet picture Abhijeet · May 12, 2020 · Viewed 10.4k times · Source

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

Answer

Julian Tellez picture Julian Tellez · Sep 27, 2020
  • 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

Related questions

Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More
Insert HTML with React Variable Statements (JSX)

I am building something with React where I need to insert HTML with React Variables in JSX. Is there a way to have a variable like so: var thisIsMyCopy = '<p>copy copy copy <strong>strong …

Read More
What is {this.props.children} and when you should use it?

Being a beginner to React world, I want to understand in depth what happens when I use {this.props.children} and what are the situations to use the same. What is the relevance of it in below code snippet? render() { …

Read More