巴别塔7 - 引用错误：regeneratorRuntime未定义

Question

我有一个应用程序，其中包含一个node后端和一个react前端。

当我尝试构建/运行我的node应用程序时，会出现以下错误。

Node版本：v10.13.0 错误信息：

dist/index.js:314 regeneratorRuntime.mark(function _callee(productId) { ^

ReferenceError: regeneratorRuntime未定义

.babelrc文件：

{
    "presets": [    [
        "@babel/preset-env", {
          "targets": {
            "node": "current"
          },
        }
      ], "@babel/preset-react"],
    "plugins": [
        "@babel/plugin-proposal-class-properties"
    ]
}

webpack.config.js

{
        mode: "development",
        entry: "./src/index.js",
        target: "node",
        externals: [nodeExternals()], // in order to ignore all modules in node_modules folder
        stats: {
            colors: true
        },
        devtool: "source-map",

        output: {
            path: path.resolve(__dirname, "dist"),
            filename: "index.js",
            sourceMapFilename: "index.js.map"
        },
        module: {
            rules: [
                {
                    enforce: "pre",
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: "eslint-loader",
                },
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules|bower_components)/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    }
                }
            ],
        },
        node: {
            __dirname: false,
            __filename: false,
        },

        "plugins": [
            new CleanWebpackPlugin(),
            new WebpackShellPlugin({
                onBuildStart: [],
                onBuildEnd: ["nodemon dist/index.js"]
            }),

        ]

    },

package.json

 "dependencies": {
    "connect": "^3.6.6",
    "cors": "^2.8.5",
    "dotenv": "^6.1.0",
    "express": "^4.16.4",
    "hellojs": "^1.17.1",
    "i18n-iso-countries": "^3.7.8",
    "morgan": "^1.9.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "request": "^2.88.0",
    "request-promise-native": "^1.0.5",
    "serve-static": "^1.13.2",
    "vhost": "^3.0.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/preset-env": "^7.1.6",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.4",
    "clean-webpack-plugin": "^1.0.0",
    "copy-webpack-plugin": "^4.6.0",
    "css-loader": "^1.0.1",
    "eslint": "^5.9.0",
    "eslint-config-google": "^0.10.0",
    "eslint-loader": "^2.1.1",
    "eslint-plugin-react": "^7.11.1",
    "extract-loader": "^3.0.0",
    "file-loader": "^2.0.0",
    "node-sass": "^4.10.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.26.0",
    "webpack-cli": "^3.1.2",
    "webpack-node-externals": "^1.7.2",
    "webpack-shell-plugin": "^0.5.0"
  }

- Kay

Answer 1

更新的答案：

如果您正在使用Babel7.4.0或更新版本，则@babel/polyfill已被弃用。相反，您应该在主JS文件（可能是index.js或类似文件）的顶部使用以下内容：

import "core-js/stable";
import "regenerator-runtime/runtime";

通过npm安装这些包：

npm install --save core-js
npm install --save regenerator-runtime    

或使用yarn：

yarn add core-js
yarn add regenerator-runtime

翻译后的答案:

我刚遇到了这个问题，并找到了以下解决方案：

在 package.json 文件中，我有 @babel/polyfill 作为一个依赖项。但是，在我的 index.js（我的主要 js 文件）中，我忘记在顶部添加以下行：

import '@babel/polyfill'

一旦我导入它，一切都正常工作。

我不需要像其他答案建议的那样安装 babel-runtime。

- kojow7

---

你，我的朋友，应该得到一个饼干！我同意不需要安装任何运行时。 - Ishay Peled

哇，这是整个互联网上唯一最新的关于此事的答案。 - jes5199

还是很有趣的想知道为什么需要这个运行时。为什么不能将异步函数转换为简单的承诺？ - Nick Redmark

通过 import "core-js/stable"; 导入 core-js/stable 会生成一个非常大的包。有没有办法告诉 Babel 只填充所需的内容？ - tonix

@ford04的解决方案更深入，列出了所有可能的解决方案，并引用了来源。 - Exegesis

Answer 2

Babel 7.4.0及以上版本

有两个主要配置 - 应用程序和库。

选项1：应用程序

何时使用：✔ 适用于应用程序 ✔全局范围的polyfills ✔ 最小化的bundle大小 ✔ 通过targets进行选择性包含 ✔ 不需要处理polyfills中的node_modules

"presets": [
  [
    "@babel/preset-env",
    {
      "useBuiltIns": "usage", // alternative mode: "entry"
      "corejs": 3, // default would be 2
      "targets": "> 0.25%, not dead" 
      // set your own target environment here (see Browserslist)
    }
  ]
]

npm i --save-dev @babel/preset-env

npm i regenerator-runtime core-js // run-time dependencies
// regenerator-runtime: transform (async) generators and `async`/`await`
// core-js: other ECMAScript features like Promise, Set, etc.

@babel/preset-env 可以选择性地 包含由 Browserslist 查询指定的目标的polyfills。它有两种模式 - 首先尝试使用 usage（更方便），否则使用 entry（更灵活和健壮）：

• useBuiltIns 'usage': no need to import anything manually. All polyfills are added automatically based on their code usage in a file.

• useBuiltIns 'entry': Add these import entries once (!) in your app - akin to @babel/polyfill:

  import "regenerator-runtime/runtime";
  import "core-js/stable"; // or more selective import, like "core-js/es/array"
  

扩展

对于高级情况，您可以仅使用@babel/transform-runtime（开发环境）和@babel/runtime（运行时）仅用于Babel helpers以减少包大小 - 称为帮助程序别名。

选项2：库

何时使用： ✔ 用于库 ✔ 不会污染全局范围 ✔ 包含所有 polyfills，而不是选择性的 ✔ 更大的包大小可以忽略

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

npm i --save-dev @babel/plugin-transform-runtime // only for build phase

npm i @babel/runtime // runtime babel helpers + just regenerator runtime
// OR (choose one!)
npm i @babel/runtime-corejs3 
// also contains other JS polyfills (not only regenerator runtime)
// depends on core-js-pure ("ponyfills"/polyfills that don't pollute global scope)

请查看@babel/plugin-transform-runtime, @babel/runtime, @babel/runtime-corejs。

扩展

您还可以使用@babel/preset-env进行语法转换，但要将 useBuiltIns: false 选项与之配合使用。由于库选项不使用全局 polyfills，因此您可能还想转换 node_modules - 可以查看 absoluteRuntime 选项。

结束语

• 重大变更: @babel/polyfill从Babel 7.4.0开始已经被弃用。

• 遗留问题: 如果你无法切换到core-js@3，请将corejs选项设置为2（请参见迁移）。如果选择了选项2，请安装@babel/runtime-corejs2（使用@babel/plugin-transform-runtime）。

• Jovica Markoski在#9853中提供了很好的总结

• 目前，库方法不考虑有选择性的目标——这意味着你可以以更大的包大小（包括所有 polyfills）获取本地范围内的polyfills。

• babel-polyfills是一种新的、实验性的方法，它可以注入不同的polyfills（不仅仅是core-js），并采用不同的策略。

• 这也允许选择性地包含本地范围内的polyfills。

- ford04

Answer 3

这里已经有一个非常好的答案（原先发布在Babel6问题中），我将其翻译成Yarn。基本上，您需要babel runtime（不作为开发依赖项）以及插件transform-runtime。

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

同时，在 .babelrc 文件中添加：

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

- Cyril Duchon-Doris

---

这个提示真的救了我。我一直在尝试使用DEV依赖，但它没有起作用。你能解释一下为什么现在它能工作吗 :) - Motassem Jalal

你的代码需要 @babel/runtime 作为依赖才能运行。 当 babel 编译你的代码时，需要使用 @babel/plugin-transform-runtime。 - Jalasem

就结果而言，你的方法和接受的答案有什么区别吗？ - VimNing

Answer 4

我的 react 项目在使用 webpack 4 时遇到了这个错误，导致整个项目无法渲染。

这是我解决它的方法：

安装 plugin-transform-runtime：

npm install @babel/plugin-transform-runtime -D

在.babelrc文件的插件列表中添加plugin-transform-runtime：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    ["@babel/transform-runtime"]  // <= Add it here
  ]  
}

- Alex Jolig

Answer 5

对我起作用的方法是：

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

- Falke Design

---

我很想了解更多关于为什么这个方法有效的内容！（对我也起作用了。） - Adam Easterling

@AdamEasterling，我很想给你更多信息，但不幸的是我不能。我花了很多时间寻找解决方案并尝试了很多方法，但我不知道我在哪里看到这个以及为什么它有效。 - Falke Design

Answer 6

我刚刚解决了这个错误，当我直接将babel-polyfill导入到显示错误的文件中时，例如，错误提示为“ReferenceError：regeneratorRuntime未定义于/dist/models/usersSchema.js”，因此我在我的usersSchema.js文件中使用了以下代码：

require("babel-polyfill");

（您也可以使用import "babel-polyfill";）

- DariusV

---

babel-polyfill已经被弃用。 - VimNing

Answer 7

确保您正在使用版本为7.18或更高的@babel/runtime。

我在这里找到了关于这个错误的解释和解决方案： https://github.com/ant-design/pro-components/issues/5273#issuecomment-1133843012

- Gabriel Berchmann

Answer 8

你需要拥有 regeneratorRuntime。

安装这两个包 - babel-plugin-transform-regenerator 和 babel-polyfill 通过 .babelrc 添加以下 Babel 配置。

{
  "plugins": ["transform-regenerator"]
}

- ksharifbd

---

我认为另一件要做的事情是安装 babel-polyfill 并在应用程序的最高级别上引用它- import 'babel-polyfill';。 - ksharifbd

使用 yarn add -D @babel/polyfill @babel/transform-regenerator 与 babel 7，并将 "@babel/transform-regenerator" 添加到我的 babelrc 插件中并没有起作用。 - Cyril Duchon-Doris

这解决了我的问题。 - itsmnthn

Answer 9

React.js 用户

如果您在使用 React（特别是在尝试使用Async/Wait时）遇到了此问题，则Valentino Gagliardi在他的博客中提供了详细的解决方案，以解决此问题。

- Abdelrahman Shoman