Babel: ReferenceError regeneratorRuntime is not defined

[xuchenchenBoy]

I'm building an SSR template, and when I use @babebl/register and then execute webpack (config), the system reported an error.
I tried @babel/polyfill and @babel/plugin-transform-runtime, but none of them worked.

Input code

index.js:

require("ignore-styles");
require("@babel/register")({
  ignore: [/\/(build|node_modules)\//],
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-syntax-dynamic-import", "dynamic-import-node"]
});
require("./server");

server.js

const config = require('../config/webpack.dev.config.js')
const webpack = require('webpack')
const express = require('express')
const webpackDevMiddleware = require('webpack-dev-middleware') 
const reactRouter = require('react-router')
const StaticRouter = reactRouter.reactRouter;
const app = express()
const complier = webpack(config)
const PORT = 8090
...
app.use(webpackDevMiddleware(complier, {
  publicPath: config.output.publicPath
}))

app.listen(PORT , function() {
  console.log(`SSR running on port ${PORT }`);
})

webpack.dev.config.js

const paths = require('./paths')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: ['webpack-hot-middleware/client?reload=true', paths.appIndexJs],
  output: {
    path: paths.clientBuild,
    filename: '[name].bundle.js',
    chunkFilename: '[name].bundle.js',
    publicPath: paths.publicPath
  },
  devtool: 'eval-source-map',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { 
              useBuiltIns: 'usage', 
              corejs: "2",  
              targets: {
                  browsers: ['last 2 versions', 'ie >= 9'],
              },
            }],
            '@babel/preset-react'
          ]
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new htmlWebpackPlugin({
      template: './client/index.html',
      filename: 'index.html'
    })
  ]
}

Error message

Environment

• Babel version(s): 7.4.3
• Node/npm version: [e.g. Node 10.15.3/npm 6.4.1]
• OS: window 10

Rep

https://github.com/xuchenchenBoy/ssr （Please execute npm run dev:server and release notes in server.js）

[babel-bot]

Hey @xuchenchenBoy! 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.

[steve-taylor]

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.

[lydell]

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.

[CodingPrimate]

Any progress? I'm having the same issue

[nicolo-ribaudo]

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

[CodingPrimate]

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 [e-mail] 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.

[matiasherranz]

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

This fixed my issue too. Thanks!

[yoyo837]

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

[sylvainDNS]

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,
        },
      },
    ],
  ],
}

[humoyun]

@sylvainDNS it worked like a charm, thanks

[paddotk]

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.

[sylvainDNS]

This snippet must be put in .babelrc.js file (or just .babelrc if you use json).

If you use create-react-app, you should override webpack config with an external dependy as :

• craco
• rescripts
• react-scripts-rewired

[paddotk]

Ok, thanks, but... Is overriding Webpack config a clever thing to do? The point of packages such as create-react-app is to save a tremendous amount of hassle setting up a working Webpack configuration yourself. I've tried it before and spent over a day getting nowhere.

[sylvainDNS]

"Stuff can break" — _Dan Abramov talking about react-app-rewired (deprecated for CRA > 2.0)_
https://twitter.com/dan_abramov/status/1045809734069170176

This tweet is a troll, but you must keep in mind that if you override Webpack config in CRA, you own the config, and no support will be provided.
However, overriding is a best alternative than ejecting your CRA.

Personally, I think that overriding webpack in CRA must be used with parsimony, and it isn't a bad thing if you know what you're doing. For instance, I'm mainly overriding CRA to use custom aliases.

But this subject is out of context :blush:

[nicolo-ribaudo]

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

[jackie1santana]

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/[email protected]/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

[filipstoklasa]

this solution works for me:

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

[lderas]

this solution works for me:

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

this one did it for me

[UkrainianCitizen]

this solution works for me:

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

Where do you put this?

[yoyo837]

.babelrc

[UkrainianCitizen]

.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"
    ]
}

[dairotenorio]

.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"
    ]
}

Thank you, this worked for me

[kheengz]

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"]
    ]
}

[mhenriquesa]

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

[ghostropic]

I had this issue but I knew it was working yesterday so I deleted node_modules and package.json lock file and it is working again without @babel/plugin-transform-runtime. I think it should work as long as you're running @babel/preset-env and core-js@3 with useBuiltIns set to entry or usage.
In .babelrc under presets:

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

found here: https://babeljs.io/docs/en/babel-preset-env#usebuiltins

the key paragraph being as follows:

This option enables a new plugin that replaces the import core-js/stable; and import "regenerator-runtime/runtime" statements (or require("core-js") and require("regenerator-runtime/runtime")) with individual requires to different core-js entry points based on environment.

I'm not sure why it was broken when I woke up this morning and I hope I don't have to keep removing and reinstalling packages to get it to work.

EDIT: so I couldn't get it to consistently work so I did end up having to add @babel/runtime and @babel/plugin-transform-runtime and put @babel/plugin-transform-runtime in my .babelrc and this fixed my problem.

[Arnaldo-Manjate]

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.

Where should the import of the runtime generator be put ?

[Arnaldo-Manjate]

What file should the import of the runtime generator be put ?

[ghostropic]

What file should the import of the runtime generator be put ?

You could put it in your top level JS file to load everywhere, or individually in modules where it's needed, but you shouldn't have to manually import it if you're using Webpack and Babel which if set up correctly will inject it for you when needed. See my comment above.

[SharakPL]

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.

The problem here is that it loads polyfills for all possible features that target browsers don't support natively. You can import just specific parts of core-js, but then you have to know exactly which part needs to be imported. That's why I prefer following config...

"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 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"
    ]
  },

[jacekkk]

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

[Arnaldo-Manjate]

thanks its been resolved
Arnaldo Manjate
Developer

| T 011 680 0540
| E [email protected] [e-mail]
| www.rapidtrade.com

On Wed, Jul 1, 2020 at 4:06 PM Jacek [e-mail] wrote:

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
https://babeljs.io/docs/en/babel-preset-env#targetsesmodules

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/babel/babel/issues/9849#issuecomment-652439254, or
unsubscribe
https://github.com/notifications/unsubscribe-auth/AMQGODHEOQMDBIUUEJI6MOTRZM7E5ANCNFSM4HFM5OTQ
.

[ayofish]

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

This really saved me. Thank you!!

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

only things needed in .babelrc

[stla]

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'
            ]
          }
        }
      ]
    }

[EddieOne]

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

[Arnaldo-Manjate]

What file should the import of the runtime generator be put ?

You could put it in your top level JS file to load everywhere, or individually in modules where it's needed, but you shouldn't have to manually import it if you're using Webpack and Babel which if set up correctly will inject it for you when needed. See my comment above.

thanks

[SharakPL]

@EddieOne this one works perfectly https://github.com/babel/babel/issues/9849#issuecomment-646245498
For development targets:

Using targets:
{
"chrome": "83",
"edge": "83",
"firefox": "77",
"safari": "13.1"
}

Using modules transform: auto

Using plugins:
syntax-numeric-separator { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
proposal-logical-assignment-operators { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-nullish-coalescing-operator { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-optional-chaining { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-json-strings { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-optional-catch-binding { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-async-generators { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-object-rest-spread { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
transform-dotall-regex { "firefox":"77" }
proposal-unicode-property-regex { "firefox":"77" }
transform-named-capturing-groups-regex { "firefox":"77" }
proposal-export-namespace-from { "firefox":"77", "safari":"13.1" }
syntax-dynamic-import { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }
syntax-top-level-await { "chrome":"83", "edge":"83", "firefox":"77", "safari":"13.1" }

Using polyfills with usage option:
Based on your code and targets, core-js polyfills were not added.

Only modern browsers targeted so no regenerator-runtime needed!

For production targets:

Using targets:

{
"chrome": "49",
"edge": "18",
"firefox": "68",
"ie": "11",
"ios": "12",
"opera": "68",
"safari": "12.1",
"samsung": "10.1"
}

Using modules transform: auto

Using plugins:
proposal-numeric-separator { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "safari":"12.1", "samsung":"10.1" }
proposal-logical-assignment-operators { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "opera":"68", "safari":"12.1", "samsung":"10.1" }
proposal-nullish-coalescing-operator { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "safari":"12.1", "samsung":"10.1" }
proposal-optional-chaining { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "safari":"12.1", "samsung":"10.1" }
proposal-json-strings { "chrome":"49", "edge":"18", "ie":"11" }
proposal-optional-catch-binding { "chrome":"49", "edge":"18", "ie":"11" }
transform-parameters { "ie":"11" }
proposal-async-generator-functions { "chrome":"49", "edge":"18", "ie":"11" }
proposal-object-rest-spread { "chrome":"49", "edge":"18", "ie":"11" }
transform-dotall-regex { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11" }
proposal-unicode-property-regex { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11" }
transform-named-capturing-groups-regex { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11" }
transform-async-to-generator { "chrome":"49", "ie":"11" }
transform-exponentiation-operator { "chrome":"49", "ie":"11" }
transform-template-literals { "ie":"11", "ios":"12", "safari":"12.1" }
transform-literals { "ie":"11" }
transform-function-name { "chrome":"49", "edge":"18", "ie":"11" }
transform-arrow-functions { "ie":"11" }
transform-classes { "ie":"11" }
transform-object-super { "ie":"11" }
transform-shorthand-properties { "ie":"11" }
transform-duplicate-keys { "ie":"11" }
transform-computed-properties { "ie":"11" }
transform-for-of { "chrome":"49", "ie":"11" }
transform-sticky-regex { "ie":"11" }
transform-unicode-escapes { "ie":"11" }
transform-unicode-regex { "chrome":"49", "ie":"11" }
transform-spread { "ie":"11" }
transform-destructuring { "chrome":"49", "ie":"11" }
transform-block-scoping { "ie":"11" }
transform-typeof-symbol { "ie":"11" }
transform-new-target { "ie":"11" }
transform-regenerator { "chrome":"49", "ie":"11" }
proposal-export-namespace-from { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "safari":"12.1", "samsung":"10.1" }
syntax-dynamic-import { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "opera":"68", "safari":"12.1", "samsung":"10.1" }
syntax-top-level-await { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11", "ios":"12", "opera":"68", "safari":"12.1", "samsung":"10.1" }

Using polyfills with usage option:
Added following core-js polyfills:
es.object.to-string { "ie":"11" }
es.promise { "chrome":"49", "edge":"18", "firefox":"68", "ie":"11" }

Based on your code and targets, added regenerator-runtime. 👈👈👈

[EddieOne]

I don't get it. It was working before. I tried several suggestions and the solution is not clear.
https://github.com/Y8Games/Y8-ai-gym/commit/f7243ea29521ddd2e3c865c5b9e684cdd253e4b1

[SharakPL]

Y8Games/Y8-ai-gym@f7243ea

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

[KonradLinkowski]

Do anybody know working alternative of babel? I'm tired of setting this up and fighting with hundreds of bugs. I just wanted to compile one file, but I babel is not capable of doing that.

[sylvainDNS]

I don't think it is the good place to ask this, but maybe you can try swc https://github.com/swc-project/swc

[KonradLinkowski]

Nevermind I just fixed all my problems by adding polyfill for babel in my project which seems hilarious that library used to downgrade code needs polyfill.

[SharakPL]

Do anybody know working alternative of babel? I'm tired of setting this up and fighting with hundreds of bugs. I just wanted to compile one file, but I babel is not capable of doing that.

Have you tried my solution above with "usage" option? It works perfectly for me. I have no idea why you all have such big problem to set this up. Show me your webpack config and maybe I'll be able to help.

[KonradLinkowski]

@SharakPL I was using CLI / online repl. Nothing worked without polyfill. I just wanted to make one file work on IE for one-time test.

[SharakPL]

I made my config specifically for IE11 and it works perfectly. Adds pollyfills automatically if needed.

[EddieOne]

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

[SharakPL]

@EddieOne this config is for new @babel packages and separate core-js. You're using old packages. Once again, refer to my first post here. Each config is linked to specific babel docs section and it shows exactly which packages need to be installed.

[makuzaverite]

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"
  ]
}

[talmobi]

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

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