babel: ReferenceError regeneratorRuntime is not defined

I had this issue using rollup with babel. I just used this babel config to resolve it :

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

You have used at least one of these features and it’s not supported in at least one of your targets (['last 2 versions', 'ie >= 9']):

• async;
• generators (function*); and/or
• async generators

As a result, @babel/preset-env decides to use @babel/plugin-transform-regenerator, which relies on regeneratorRuntime being available globally.

To fix this, simply use regenerator-runtime, following the instructions in its README to ensure regeneratorRuntime is made available globally.

.babelrc

Thanks. This worked for me:

1. npm install --save-dev @babel/plugin-transform-runtime
2. Including this in .babelrc

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

It feels like https://babeljs.io/docs/en/babel-preset-env could be improved, because currently it is unclear how to properly set up regenerator. Examples on different ways of doing would be great.

this solution works for me:

 "plugins": [
    "@babel/plugin-transform-runtime",
....
  ]

This thread is a sad testament into how blown to shit the situation is.

🙏🙏🙏 Here’s a few prayers for future lost souls 🙏🙏🙏

Easiest way to fix this ‘regeneratorRuntime not defined issue’ in your console:

You don’t have to install any unnecessary plugins. Just add:

<script src="https://unpkg.com/regenerator-runtime@0.13.1/runtime.js"></script>

inside of the body in your index.html. Now regeneratorRuntime should be defined once you run babel and now your async/await functions should be compiled successfully into ES2015

@PenguinTamer Did you try using useBuiltIns: usage, @babel/plugin-transform-runtime or importing regenerator-runtime?

I had this issue using rollup with babel. I just used this babel config to resolve it :

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

I can’t get it to work, and Webpack doesn’t seem to allow this snippet in any kind of way. I’m guessing most people use Webpack (and its config file isn’t even preset if create-react-app is used) so what is the solution for the rest?

I installed @babel/plugin-transform-runtime within the app as well as regenerator-runtime globally, by the way.

Note that @babel/polyfill has been deprecated for a while. To solve the regeneratorRuntime problem, you can do this:

• Install regenerator-runtime npm install --save regenerator-runtime
• Update webpack file entry: ["regenerator-runtime/runtime.js", "<your enter js file>"]

Babel 7 Users

I had some trouble getting around this since most information was for prior babel versions. For Babel 7, install these two dependencies:

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

And, in .babelrc, add:

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        ["@babel/transform-runtime"]
    ]
}

I’m use @babel/plugin-transform-runtime, still got this issue.

1. Install babel-polyfill npm install --save @babel/polyfill

2. Update webpack file entry: ["@babel/polyfill", "<your enter js file>"]

import 'regenerator-runtime/runtime'

@PenguinTamer Did you try using useBuiltIns: usage, @babel/plugin-transform-runtime or importing regenerator-runtime?

This fixed my issue too. Thanks!

I had this issue using rollup with babel. I just used this babel config to resolve it :

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

This worked for me thanks @sylvainDNS

i have to write it like this though

in my .bablerc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "esmodules": true
        }
      }
    ],
    "@babel/preset-react"
  ]
}

npm i -D @babel/core @babel/preset-env core-js

No other plugins are needed.

“useBuiltIns”: “entry”:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "corejs": 3,
        "debug": true
      }
    ]
  ]
}

then start your main.js with this:

import 'core-js';
import 'regenerator-runtime/runtime';

regenerator-runtime/runtime is @babel/preset-env dependency.

“useBuiltIns”: “usage”

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3,
        "debug": true
      }
    ]
  ]
}

No extra imports are required. All pollyfills will be loaded automatically based on your code and Webpack will do the rest.

As for the targets I think it’s best to rely on .browserslistrc or browserslist in package.json instead of overriding it in .babelrc:

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 1 edge version"
    ]
  },

.babelrc

Thanks. This worked for me:

1. npm install --save-dev @babel/plugin-transform-runtime
2. Including this in .babelrc

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

for me

module.exports = {
  plugins: ["@babel/transform-runtime"],
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
};

CRA already includes @babel/plugin-transform-runtime: https://github.com/facebook/create-react-app/blob/3f699fd08044de9ab0ce1991a66b376d3e1956a8/packages/babel-preset-react-app/create.js#L162

I did and resolved my issue, thank you for your answer though!

Sent from my iPhone

On Dec 26, 2019, at 5:07 PM, Nicolò Ribaudo notifications@github.com wrote:

@PenguinTamer Did you try using useBuiltIns: usage, @babel/plugin-transform-runtime or importing regenerator-runtime?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

this solution works for me:

 "plugins": [
    "@babel/plugin-transform-runtime",
....
  ]

Where do you put this?

import 'regenerator-runtime/runtime' in the root file and import 'regenerator-runtime/runtime' in my jest.config.js helped

Note that @babel/polyfill has been deprecated for a while. To solve the regeneratorRuntime problem, you can do this:

• Install regenerator-runtime npm install --save regenerator-runtime
• Update webpack file entry: ["regenerator-runtime/runtime.js", "<your enter js file>"]

We’re using Babel 6 (for reasons) and this worked for us, thanks very much!!!

Still not working for me.

Update: After updating to Babel 7, I found this page helpful. https://stackoverflow.com/questions/53558916/babel-7-referenceerror-regeneratorruntime-is-not-defined

I had a similar problem but I don’t use .babelrc. I solved by writing that in webpack.config.js:

    module: {
      rules: [
        {
          test: /\.jsx?$/,
          loader: 'babel-loader',
          options: {
            presets: [
              [
                '@babel/preset-env',
                {
                  targets: {
                    esmodules: true
                  }
                }
              ],
              '@babel/preset-react'
            ]
          }
        }
      ]
    }

this solution works for me:

 "plugins": [
    "@babel/plugin-transform-runtime",
....
  ]

this one did it for me

Y8Games/Y8-ai-gym@f7243ea

Wrong place for babel presets! Check the docs for babel configuration or webpack’s babel-loader examples.

None of these are working for me. What one worked for others?

I had this issue using rollup with babel. I just used this babel config to resolve it :

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

Bear in mind that adding esmodules: true will lead to browsers target being ignored if you included it too, as per Babel docs

I had this issue using rollup with babel. I just used this babel config to resolve it :

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          esmodules: true,
        },
      },
    ],
  ],
}

Thankssss, Mate!! Like a charm