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

Question

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

Answer 1

• 安装运行时依赖

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

• 将插件添加到 your.babelrc 文件

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

更多信息： https://babeljs.io/docs/en/babel-plugin-transform-runtime

TLDR；

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

Answer 2

谢谢 当我添加一个导入语句时它起作用了—— import regeneratorRuntime from "regenerator-runtime"; 在我使用异步/等待的组件中。

Answer 3

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

• Babel 6 regeneratorRuntime 未定义
• Babel 7 - ReferenceError: regeneratorRuntime 未定义

以下行动有所帮助：

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

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

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

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

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

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

希望它可以帮助像它帮助我的人...

Answer 4

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

Answer 5

只需添加

  "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 的外观。

Answer 6

2022

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

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

import regeneratorRuntime from "regenerator-runtime";

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