Hulya

Posted on Jun 16, 2021

How to fix regeneratorRuntime is not defined?

#react #parcel #debug

I have ran into a problem, the error is regeneratorRuntime is not defined while working with React and Parcel bundler.

The problem appeared after I added an async function and while searching the problem, I found a stack-overflow solution but it didn't work. So, don't use this method.

Solution

First, I found this solution:

add import "babel-polyfill"; at the top of the file that you are using the async function.

BUT

later learned that babel-polyfill is deprecated. So, to solve the regeneratorRuntime problem, do this:
Install regenerator-runtime
npm install --save regenerator-runtime
Update webpack file
entry: ["regenerator-runtime/runtime.js", "<your enter js file>"]
require import 'regenerator-runtime/runtime' at the top of the file that you're using async function

I didn't edit webpack, because I'm using Parcel, but just importing regenerator-runtime/runtime at the top of the file solved the problem.

Resources

BABEL/ReferenceError regeneratorRuntime is not defined #9849

Oldest comments (23)

VitoMedlej • Jul 17 '21

thanks man u saved my keyboard from being smashed

Hulya • Jul 24 '21

Haha, good for the keyboard 😃

Akanksha Gahalot • Jul 19 '21

Thank you soooo much!!! You saved me!

Hulya • Jul 24 '21

Happy to help 👍

Prosper Nglazi • Aug 3 '21

Hi, now am getting a 'process not defined' error because in my file am using 'process.env.API_URL' to create a base url to the server. How can I solve this? Thanks

Pedro Lucas Copatti • Aug 12 '21

I created an account just to thank you!
thank you so much!
Saved me.

Hulya • Aug 14 '21

Wow, thanks Pedro 👍🏻

Ori A. • Aug 24 '21

Made an account just to say non of these or any single findable "fix" on the internet can fix this in late 2021,
again webpack and babel waste hours upon hours of dev time for their chronic incompatibly and version inconsistency.
I hate every hour I work in this industry.

Arkadeep Nag • Dec 22 '21

then please leave to code

Nikita Makhov • Feb 10 '22

Strange, worked for me.

execptionerror • Aug 24 '21

[Already Solved] Babel ReferenceError: regeneratorRuntime is not defined

Luís Eduardo • Sep 22 '21

Thanks, work for me 😍

Moussack • Oct 23 '21

ty my man this works, i use the simple solution 3

pyscho3 • Jan 4 '22

Thanks for saving my keyboard from getting shattered, guy.
stick merge

itzsrikanth • Jan 15 '22

I had babel-polyfill in couple of files in codebase but was not able to understand since I was new. In those files it had just this statement to fix issue:

require('babel-polyfill')

import 'babel-polyfill'

Thanks for this article..!

Yalon • Feb 3 '22

Thank you 🧡

bleedeleventh • Mar 4 '22

Thank you so much Hulya, it worked for me.

aderchox • Apr 12 '22

This is no more recommended. Use this instead:

npm i -D @babel/plugin-transform-runtime

...and add in .babelrc:

  "plugins": [
    ["@babel/transform-runtime", {
      "regenerator": true
    }]
  ]

Subhajit Roy • May 17 '22

Thank you it solved my async/await issue 🙌🏼

Felipe Nascimento de Moura • Jun 26 '22

wow! It, weirdly enough...worked!
Usually I too waste HOURS looking for how to fix this rocket science configs.
I have components that are lazy loaded with all their dependencies, but when a component imported something from node_modules, I had this error.
I'm using next.js.
I just installed the dependency regenerator-runtime and added import 'regenerator-runtime/runtime'; to the top of the root component that was lazy loaded and it, for my surprise, worked, as simple as that!
Thank you very much :)
Simple and effective.