"regeneratorRuntime is not defined" error with async and "useBuiltIns": "usage" #8829

mrichmond · 2018-10-08T22:05:11Z

Bug Report

Current Behavior
I get a "regeneratorRuntime is not defined" error when using @babel/preset-env and "useBuiltIns": "usage" with a nested async arrow function in my React HOC.

Input Code
React Component JS - DeleteAsset.js

import React from 'react';
import { compose, withHandlers, setDisplayName } from 'recompose';
import { Button } from '@material-ui/core';

export default compose(
  setDisplayName('DeleteAsset'),
  withHandlers({
    onConfirm: ({ deleteImage, deleteVideo, id, type }) => async () => {
      if (type === 'image') await deleteImage(id);
      else if (type === 'video') await deleteVideo(id);
      console.log('ASSET DELETED');
    },
  }),
)(({ onConfirm }) => (<Button {...{ onClick: onConfirm }}>Delete</Button>));

Expected behavior/code
No regeneratorRuntime errors

Babel Configuration (.babelrc, package.json, cli command)
package.json

{
  "devDependencies": {
    "@babel/cli": "7.1.2",
    "@babel/core": "7.1.2",
    "@babel/polyfill": "7.0.0",
    "@babel/preset-env": "7.1.0",
    "@babel/preset-react": "7.0.0",
    "webpack": "4.20.2",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.9"
  }
}

.babelrc

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "browsers": ["last 2 chrome versions"] },
      "useBuiltIns": "usage"
    }],
    "@babel/preset-react"
  ]
}

Environment

@babel/cli version: 7.1.2
@babel/core version: 7.1.2
@babel/polyfill version: 7.0.0
@babel/preset-env version: 7.1.0
Node version: 10.11.0
NPM version: 6.4.1
Yarn version: 1.10.1
webpack version: 4.20.2
webpack-cli version: 3.1.2
webpack-dev-server version: 3.1.9
How you are using Babel: loader (webpack)

Possible Solution
If I switch to "entry" mode and add the polyfill to my webpack entry, then the regeneratorRuntime error is no longer present.

example .babelrc config: "useBuiltIns": "entry"
example webpack.config.js config: entry: ['@babel/polyfill', './src/index.js'],,

It seems that "entry" is a less optimal solution than "usage" for the "useBuiltIns" parameter. I believe this indicates a possible bug with the "usage" feature of "useBuiltIns" with Babel 7 @babel/preset-env.

Additional context/Screenshots

The text was updated successfully, but these errors were encountered:

babel-bot · 2018-10-08T22:05:14Z

Hey @mrichmond! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

ghost · 2018-10-15T14:58:35Z

Hi,
Same problem here as @mrichmond. His "hack" is really useful for me, now I can use async functions at any component in my project.

Just fyi my package.json is:

  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",

and my .babelrc is :

{
  "presets": ["@babel/preset-env",  "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]
}

After suggested in the first post, now is working. My .babelrc now is:

{
  "presets": [[
    "@babel/preset-env", {
      "useBuiltIns": "entry"
    }],
    "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]
}

And the entry key of my webpack configuration file is:
module.exports = { entry: ['@babel/polyfill', './src/index.js'], ...

Also I've checked with plugins:

babel-plugin-syntax-async-functions

@babel/plugin-transform-async-to-generator

@babel/plugin-transform-runtime

And with all of them i had the same error of "regeneratorRuntime is not defined"
Cheers!

ghost · 2018-12-11T13:32:31Z

Same problem here.

usage should work... Problem with entry is that my file is no 2X larger than before...

iedmrc · 2018-12-25T13:51:31Z

Hi,
Same problem here as @mrichmond. His "hack" is really useful for me, now I can use async functions at any component in my project.

Just fyi my package.json is:
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^9.0.0",
    "babel-jest": "^23.4.2",
    "babel-loader": "^8.0.0",
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5",
and my .babelrc is :
{
  "presets": ["@babel/preset-env",  "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]
}
After suggested in the first post, now is working. My .babelrc now is:
{
  "presets": [[
    "@babel/preset-env", {
      "useBuiltIns": "entry"
    }],
    "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "react-hot-loader/babel"
  ]
}
And the entry key of my webpack configuration file is:
module.exports = { entry: ['@babel/polyfill', './src/index.js'], ...

Also I've checked with plugins:

babel-plugin-syntax-async-functions

@babel/plugin-transform-async-to-generator

@babel/plugin-transform-runtime

And with all of them i had the same error of "regeneratorRuntime is not defined"
Cheers!

This works like a charm! Thanks! 🎉🎉🎉

laustdeleuran · 2019-01-10T20:11:13Z

+1

I'm experiencing this same issue. @mrichmond's workaround does resolve the issue, and I'm not experiencing the ~2x bloat in file size that "@ghost" was referring to. It does still seem like a bug, tho?

Cody0913 · 2019-01-22T19:11:20Z

The solution from this issue thread worked for me. Importing the following:

yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime

for my dependencies and having the following in my .babelrc

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

tstirrat15 · 2019-01-31T22:45:50Z

@Cody0913 meaning in addition to useBuiltIns: 'usage'? Or is that instead of?

Under what circumstances will useBuiltIns: 'usage' work? I'm seeing the same error as OP, and reverting to entry seems like a workaround more so than a fix.

Edit

It's in addition to. Having that transform means a slightly larger bundle (70k instead of a 75k reduction in my project) compared to using usage by itself, but it works, and is still an improvement.

ghost · 2019-04-08T06:44:28Z

@Cody0913 your solution works for me too.

Isn't using @babel/polyfill in combination with @babel/plugin-transform-runtime and @babel/runtime kinda redundant? All the docs I have read say, you should only install either of them (dependent on if you develop a library or an application). Would be interested in a more clear solution, but honestly lack the babel internal knowledge here...

nicolo-ribaudo · 2019-04-08T06:50:17Z

Do you want to globally install polyfills? @babel/polyfill or core-js
Do you want to only make polyfills available to your own code? @babel/transform-runtime + @babel/runtime with corejs enabled.

If you use @babel/runtime only for the Babel helpers, it doesn't "conflict" with @babel/polyfill.

ghost · 2019-04-08T10:27:53Z

thx @nicolo-ribaudo, I thought both were mutually exclusive.

Just curious: why cannot @babel/polyfill alone provide the regenerator-runtime as it is already included in the package? If I include this polyfill, I would expect it to contain everything necessary. Do you have some code lines/ modules where one can dig into the issue?

+-- @babel/polyfill@7.4.3
| `-- regenerator-runtime@0.13.2

josemigallas · 2019-04-09T11:20:36Z

The solution from this issue thread worked for me. Importing the following:
yarn add @babel/plugin-transform-runtime --dev
yarn add @babel/runtime
for my dependencies and having the following in my .babelrc
"plugins": [
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ],

As a comment on this solution, regenerator value is true by default, no need to add that. It worked like a charm by the way, thanks! (Short version I guess is: use babel-plugin-transform-runtime.)

nicolo-ribaudo · 2019-05-14T22:19:34Z

Is this still an issue?

babel/babel#8829 (comment)

mrichmond mentioned this issue Oct 8, 2018

importing vue results in a "regeneratorRuntime is not defined" error #8724

Closed

paulftw pushed a commit to hypermodeinc/ratel that referenced this issue Dec 17, 2018

Fix regeneratorRuntime babel/babel#8829

0eba779

nicolo-ribaudo added the awaiting reply label May 14, 2019

nicolo-ribaudo closed this as completed May 16, 2019

thektan mentioned this issue Jun 4, 2019

Support async/await in jest tests liferay/liferay-npm-tools#105

Closed

weilonge added a commit to weilonge/webpack-boilerplate that referenced this issue Jul 1, 2019

Add async/await support in jest tests.

62745ab

babel/babel#8829 (comment)

ugglr added a commit to ugglr/test-fullstack that referenced this issue Jul 21, 2019

bumped into this issue: babel/babel#8829

a3f3b34

atherdon mentioned this issue Jul 21, 2019

internal scripts return errors [paused] Food-Static-Data/food-static-files-generator#167

Closed

mischnic mentioned this issue Jul 29, 2019

Async functions are always transformed to regenerator runtime parcel-bundler/parcel#871

Closed

lock bot added the outdated label Aug 15, 2019

lock bot locked as resolved and limited conversation to collaborators Aug 15, 2019

rdok added a commit to rdok/graphql-blog.api that referenced this issue Nov 16, 2019

Attempting to fix babel/babel#8829.

d97d8c2

rdok added a commit to rdok/graphql-blog.api that referenced this issue Nov 16, 2019

Attempting to fix babel/babel#8829.

c0aa42c

rdok added a commit to rdok/graphql-blog.api that referenced this issue Nov 16, 2019

Attempting to fix babel/babel#8829.

950dced

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Sponsors

"regeneratorRuntime is not defined" error with async and "useBuiltIns": "usage" #8829

"regeneratorRuntime is not defined" error with async and "useBuiltIns": "usage" #8829

mrichmond commented Oct 8, 2018

babel-bot commented Oct 8, 2018

ghost commented Oct 15, 2018 •

edited by ghost

Loading

ghost commented Dec 11, 2018

iedmrc commented Dec 25, 2018

laustdeleuran commented Jan 10, 2019

Cody0913 commented Jan 22, 2019

tstirrat15 commented Jan 31, 2019 •

edited

Loading

ghost commented Apr 8, 2019 •

edited by ghost

Loading

nicolo-ribaudo commented Apr 8, 2019 •

edited

Loading

ghost commented Apr 8, 2019

josemigallas commented Apr 9, 2019

nicolo-ribaudo commented May 14, 2019

"regeneratorRuntime is not defined" error with async and "useBuiltIns": "usage" #8829

"regeneratorRuntime is not defined" error with async and "useBuiltIns": "usage" #8829

Comments

mrichmond commented Oct 8, 2018

Bug Report

babel-bot commented Oct 8, 2018

ghost commented Oct 15, 2018 • edited by ghost Loading

ghost commented Dec 11, 2018

iedmrc commented Dec 25, 2018

laustdeleuran commented Jan 10, 2019

Cody0913 commented Jan 22, 2019

tstirrat15 commented Jan 31, 2019 • edited Loading

Edit

ghost commented Apr 8, 2019 • edited by ghost Loading

nicolo-ribaudo commented Apr 8, 2019 • edited Loading

ghost commented Apr 8, 2019

josemigallas commented Apr 9, 2019

nicolo-ribaudo commented May 14, 2019

ghost commented Oct 15, 2018 •

edited by ghost

Loading

tstirrat15 commented Jan 31, 2019 •

edited

Loading

ghost commented Apr 8, 2019 •

edited by ghost

Loading

nicolo-ribaudo commented Apr 8, 2019 •

edited

Loading