Babel 7 - 未捕获的 ReferenceError：未定义 regeneratorRuntime答案

【问题标题】：Babel 7 - Uncaught ReferenceError: regeneratorRuntime is not definedBabel 7 - 未捕获的 ReferenceError：未定义 regeneratorRuntime
【发布时间】：2021-09-26 02:03:09
【问题描述】：

我在使用带有 webpack 和 Babel 的 React 时遇到错误 Uncaught ReferenceError: regeneratorRuntime is not defined。

我已经关注this answer，将我的.babel.rc 定义为：

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

并运行：

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

但是，之后我得到了完全相同的错误。我也关注了this other answer 和this one，但仍然得到完全相同的错误。

我在package.json的babel具体安装如下：

  "dependencies": {
    "@babel/runtime": "^7.14.6"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5"
  }

有什么想法吗？

【问题讨论】：

标签： reactjs webpack babeljs babel-loader

【解决方案1】：

{ “预设”：[ [ "@babel/preset-env", { “目标”：{ “节点”：“9.2.1” } } ], “@babel/preset-react”] }

这是我的文件 .babelrc

看：

@babel/preset-env 是一个智能预设，允许您使用最新的 JavaScript，而无需微观管理您的目标环境需要哪些语法转换（以及可选的浏览器 polyfills）。）。这既让你的生活更轻松，也让 JavaScript 包更小！

您的问题：

你正在使用“@babel/preset-env”你必须指定要编译的节点版本。 “节点> 7.6”。我推荐 10 个。

为什么 node > 7.6 Node.js 7.6 已提供官方支持，默认启用异步/等待，并在低内存设备上提供更好的性能。

如何指定版本：很简单

targets.node 字符串 | “当前”。

If you want to compile against the current node version, you can specify "node": "current", which would be the same as "node": process.versions.node.

对我来说看起来像这样：

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

这可以让编译器理解ASYNC AWAIT，希望对你有帮助！

您还可以添加一个插件来处理您的“asyc away”

https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator

注意 -> 此配置适用于 node-js；这只是一个例子

【讨论】：

【解决方案2】：

嘿，我遇到了同样的问题，我正在使用 Babel 7，我安装了这两个依赖项：

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

并且，在 .babelrc 中，添加：

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

}

这解决了我的问题

【讨论】：

【解决方案3】：

这最终对我有用：

How to allow async functions in React + Babel?

我的问题是我在我的.babel.rc 文件和我的webpack.config.js 文件中定义了 babel 插件both。我需要从我的webpack.config.js 中删除该插件，并仅在我的.babel.rc 文件中使用它。然后效果很好。

【讨论】：