ReferenceError regeneratorRuntime is not defined

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）

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

[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.