0

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 use async/await with Babel/Webpack; or is there an better (e.g. simpler way)?
Thomas Fauskanger
  • 2,536
  • 1
  • 27
  • 42

0 Answers0