DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Hulya
Hulya

Posted on

How to fix regeneratorRuntime is not defined?

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

Alt Text

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

Top comments (21)

Collapse
felipenmoura profile image
Felipe Nascimento de Moura

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.

Collapse
orialon profile image
Ori A.

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.

Collapse
arkadeepnag profile image
Arkadeep Nag

then please leave to code

Collapse
defite profile image
Nikita Makhov

Strange, worked for me.

Collapse
aycanogut profile image
bleedeleventh

Thank you so much Hulya, it worked for me.

Collapse
subhajitroycode profile image
Subhajit Roy

Thank you it solved my async/await issue ๐Ÿ™Œ๐Ÿผ

Collapse
pyscho3 profile image
pyscho3

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

Collapse
yalondpsi profile image
Yalon

Thank you ๐Ÿงก

Collapse
execptionerror profile image
Collapse
luiseduardogfranca profile image
Luรญs Eduardo

Thanks, work for me ๐Ÿ˜

Collapse
moussack profile image
Moussack

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

Collapse
aderchox profile image
aderchox

This is no more recommended. Use this instead:

npm i -D @babel/plugin-transform-runtime
Enter fullscreen mode Exit fullscreen mode

...and add in .babelrc:

  "plugins": [
    ["@babel/transform-runtime", {
      "regenerator": true
    }]
  ]
Enter fullscreen mode Exit fullscreen mode
Collapse
itzsrikanth profile image
itzsrikanth

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')
Enter fullscreen mode Exit fullscreen mode

or

import 'babel-polyfill'
Enter fullscreen mode Exit fullscreen mode

Thanks for this article..!

Collapse
enraiha0307 profile image
Akanksha Gahalot

Thank you soooo much!!! You saved me!

Collapse
hulyakarakaya profile image
Hulya Author

Happy to help ๐Ÿ‘

Collapse
vitomedlej profile image
VitoMedlej

thanks man u saved my keyboard from being smashed

Collapse
hulyakarakaya profile image
Hulya Author

Haha, good for the keyboard ๐Ÿ˜ƒ

Collapse
pedrollcopatti profile image
Pedro Lucas Copatti

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

Collapse
hulyakarakaya profile image
Hulya Author

Wow, thanks Pedro ๐Ÿ‘๐Ÿป

Collapse
prosperdoescode profile image
Prosper Nglazi

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

Collapse
kirsten_the_dev profile image
kirsten_the_dev

This answer helped me => stackoverflow.com/questions/654870...

๐ŸŒš Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.