Babel - regeneratorRuntime is not defined, when using transform-async-to-generator plugin

Question

I am not able to setup babel correctly for the usage of async / await.

I am using babel 7 and webpack 4.

I do not want to use babel-polyfill if possible!

My babelrc file:

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-async-to-generator"
    ]
}

Code:

async function init() {
  const loaderData = await initLoader();
  initCmp(loaderData)
    .then(initApi(loaderData.key))
    .catch();
}
init();

And Error:

refactor.main.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
    at eval (refactor.main.js:18)
    at eval (refactor.main.js:47)
    at Object../client/refactor.main.js (cmp.bundle.js:312)
    at __webpack_require__ (cmp.bundle.js:62)
    at eval (main.js:6)
    at Object../client/main.js (cmp.bundle.js:300)
    at __webpack_require__ (cmp.bundle.js:62)
    at cmp.bundle.js:179
    at cmp.bundle.js:182

score 37 · Answer 1 · answered Sep 17 '18 at 09:42

37

The latest documentation here is pretty clear: https://babeljs.io/docs/en/next/babel-plugin-transform-runtime

What worked for me is installing the two packages for build and for runtime (the final script for the browser):

npm install --save-dev @babel/plugin-transform-runtime

npm install --save @babel/runtime

In the plugin Array of my webpack configuration I just added '@babel/plugin-transform-runtime' without any options. (Please also have a look at the documentation linked above, since some options (that you might find in older tutorials or answers) have been removed.)

plugins: [
'@babel/plugin-transform-runtime'
]

I now can use async functions without errors, and it didn't add much code in the production build.

answered Sep 17 '18 at 09:42

makkabi

619
6
10

8

When I use this I get an error saying `require is not defined` – Batman Feb 19 '19 at 02:22
@makkabi can you explain why you install `@babel/plugin[...]` in dev and `@babel/runtime` not? – Dan Aug 24 '19 at 12:03
@Daniel I followed the docs I linked to above, there is more explaination. As far as I understand, plugin-transform-runtime is used for transpiling the code on build time, so it is only a development dependency and not needed for running the transpiled code. – makkabi Aug 25 '19 at 15:03
I had the same problem in a project with typescript, `esm` modules and jest. I put this 'plugins' array inside `babel.config.json` and it worked. – Adrián E. Oct 30 '20 at 18:03
thank, this also work in rollup config – Ari Pratomo Jan 20 '22 at 08:50

score 2 · Answer 2 · answered Jun 22 '18 at 18:01

2

You also need the transform-runtime plugin, so your .babelrc should ready:

{
    "presets": [[
        "@babel/env",
        {"modules": false}
    ]],
    "plugins": [
      "syntax-dynamic-import",
      "transform-runtime",
      "transform-async-to-generator"
    ]
}

Note that you'll also need to npm install --save-dev transform-runtime

answered Jun 22 '18 at 18:01

goofballLogic

37,883
8
44
62

1

I needed to do `npm install -D babel-plugin-transform-runtime`, where the difference is the added prefix `babel-plugin-`. Without it I got an error that said _ReferenceError: Unknown plugin "transform-runtime"_ when adding the `"transform-runtime"`-plugin. – Thomas Fauskanger Jul 15 '18 at 00:40

Babel - regeneratorRuntime is not defined, when using transform-async-to-generator plugin

2 Answers2

Linked