未捕获的 ReferenceError：RegeneratorRuntime 未在 React 中定义答案

【问题标题】：Uncaught ReferenceError: regeneratorRuntime is not defined in React未捕获的 ReferenceError：RegeneratorRuntime 未在 React 中定义
【发布时间】：2020-08-28 13:06:43
【问题描述】：

我收到一个错误“未捕获的 ReferenceError：未定义 regeneratorRuntime”。请帮助我找出错误以及如何解决它。

【问题讨论】：

这是 babel 配置的问题。查看更多：stackoverflow.com/questions/53477466/…
module.exports = { 预设：['@babel/preset-env', '@babel/preset-react'], }; - 此代码在我的 babel.config.js 文件中，每当我向其中添加插件和 sourceMap 时，我的 nodemon 停止工作显示应用程序在启动前崩溃等待文件更改，当我删除插件时，modemon 将开始工作，然后服务器是正在运行..
@Akber 这个好像和测试无关，JavaScript测试框架的正确标签是jestjs。

标签： reactjs frontend react-functional-component

【解决方案1】：

2022

如果您使用的是 Babel 7 或更高版本，则无需安装额外的插件（@babel/plugin-transform-runtime 或 @babel/plugin-transform-regenerator 或 other plugins）。

以后，每次使用async/await 语法时都必须包含此语句。

import regeneratorRuntime from "regenerator-runtime";

也许如果您在项目中设置了一个 linter，它会警告您该语句已声明但它的值从未被读取，但我认为这只是一个错误，因为如果您删除它，代码将不起作用。

【讨论】：

【解决方案2】：

添加

  "browserslist": [
    "last 2 Chrome versions"
  ]

在你的项目package.json文件末尾，还要看到它的复数浏览器不是浏览器！

你的文件最终可能看起来像这样 ->

  },
  "dependencies": {
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

忽略上面代码视图中的依赖部分，它只是作为你的 package.json 外观的参考。

【讨论】：

【解决方案3】：

如果您确实需要使用异步功能，那么上述解决方案应该可以工作。解决此问题的另一种方法是使用常规承诺，至少在我的情况下是这样。

【讨论】：

【解决方案4】：

遇到了这个问题（使用 Babel v7），即使遵循建议并安装了相关软件包，我仍然无法获取此错误的 id。检查了以下堆栈溢出帖子...

以下操作有所帮助：

转到 package.json 并在“jest”中添加以下内容（还添加了屏幕截图）：

“模块名称映射器”：{
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": “身份-obj-代理”}

运行测试时，在命令中使用以下后缀...

--setupFilesAfterEnv "./src/setupTests.js"

所以要运行一个测试，它将是：

$ jest /pathToTest/TestFile.test.js --setupFilesAfterEnv "./src/setupTests.js"

希望它能帮助像它帮助我的人......

【讨论】：

【解决方案5】：

安装运行时依赖项

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

将插件添加到您的 .babelrc 文件中

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

TLDR;

异步函数是生成器之上的抽象。
现在所有主流浏览器以及 Node10 及更高版本都支持异步函数和生成器。
如果您使用转译器（例如 babel）来实现向后兼容性，则需要一个额外的“层”来转换生成器。这意味着在运行时将 ES6 转换为 ES5，因为它们的语法不向后兼容。见https://cmichel.io/how-are-generators-transpiled-to-es5

【讨论】：

【解决方案6】：

谢谢，当我在我正在使用 async/await 的组件中添加一个 import 语句时它可以工作 -- import regeneratorRuntime from "regenerator-runtime";。

【讨论】：

添加 import 后这对我不起作用，还有什么需要做的吗？
@aviboy2006 尝试使用import "regenerator-runtime"导入默认导出
它对我有用，谢谢！