I was working on an issue that was similar to Babel - regeneratorRuntime is not defined, when using transform-async-to-generator plugin. I've resolved it, but I am not sure why.
My problem
Simply, what I wanted to achieve was to be able to use generator functions and async
/await
in my React project where I use Webpack 4 and Babel.
My wrong assumption
An initial, but apparently wrong, assumption I made was to think that Babel's babel-preset-env
was a quick-fix that included most of the common, modern features of JS (ES2015-ES2018?)
To use the spread syntax, I had to add transform-object-rest-spread
; to use generator functions with yield
I had to add transform-runtime
.
However, when I wanted to use the async
/await
features, I came into the same error as when I tried to use generator functions:
ReferenceError: regeneratorRuntime is not defined
Solved, but not understood
I managed to get around it with something like this, so my .babelrc
-file looks like:
{
"presets": [
// "env",
"react",
"stage-0"
],
"plugins": [
"transform-object-rest-spread",
"transform-async-to-generator",
[
"transform-runtime",{
"polyfill": false,
"regenerator": true
}]
]
}
Note that I have commented out the env
-part of the presets. After commenting it out, my problem seems to be resolved, and I can still use all the other features.
The question
- Why does it work now, but not before?
- Also, is
transform-async-to-generator
required to useasync
/await
with Babel/Webpack; or is there an better (e.g. simpler way)?