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

[mrichmond]

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

[babel-bot]

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]

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]

Same problem here.

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

[iedmrc]

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]

+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]

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]

@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]

@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]

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]

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]

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]

Is this still an issue?