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

Question

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

Answer 1

• 安装运行时依赖

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

• 将插件添加到您的 .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";在我使用 async/await 的组件中。

Answer 3

只需添加

  "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 4

2022年

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

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

import regeneratorRuntime from "regenerator-runtime";

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