logo标签列表

在React中出现了“Uncaught ReferenceError: regeneratorRuntime未定义”的错误

reactjsfrontendreact-functional-component
28

我遇到了一个错误：“未捕获的引用错误：regeneratorRuntime未定义”。请帮忙找出错误并解决。

在此输入图片描述

1
这是 babel 配置的问题。查看更多：https://dev59.com/jlQJ5IYBdhLWcg3wnHPm - maten
module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], // 这段代码在我的 babel.config.js 文件中，每当我添加插件和 sourceMap 时，我的 nodemon 就会停止工作，显示应用程序崩溃等待文件更改才能启动，当我删除插件时，nodemon 就会开始工作，然后服务器运行。 }; - Abhijeet
@Akber，这似乎与测试无关，JavaScript测试框架的正确标签是[tag:jestjs]。 - jonrsharpe
7个回答
51
  • 安装运行时依赖
npm i --save-dev @babel/plugin-transform-runtime
  • 将插件添加到您的 .babelrc 文件中
{
  "plugins": ["@babel/plugin-transform-runtime"]
}

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

简而言之;

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

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

添加了 import 后，这对我没有用。还需要做什么额外的工作吗？ - Avinash Dalvi
3
@aviboy2006 尝试使用 import "regenerator-runtime" 导入默认导出。 - Chris - Jr
它对我有用，谢谢！ - Maria
6

只需添加

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

在你的项目的package.json文件末尾，也要注意它是复数browsers而不是单数browser！你的文件最后可能看起来像这样 ->
  },
  "dependencies": {
    "prop-types": "^15.8.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "browserslist": [
    "last 2 Chrome versions"
  ]
}

请忽略以上代码视图中的依赖项部分，这只是为了参考您的 package.json 可能看起来如何。

1
这对我有用，只是在寻找一个快速的解决方案，已经像其他人提到的那样使用了Babel 7。 - VladNeacsu
5

2022

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

稍后，每次使用async/await语法时，您都需要包含以下语句：

import regeneratorRuntime from "regenerator-runtime";

如果您在项目中设置了一个linter，则它会警告您该语句被声明，但其值从未被读取，但我认为这只是一个错误，因为如果您删除它，代码将无法正常工作。

如果像我一样由于第三方模块在小版本更新中决定添加async，导致出现错误，那么在Babel 7中仍然需要插件。 :D - tekHedd
0

遇到了这个问题 (使用 Babel v7)，即使按照建议安装相关的包，我仍然无法获取这个错误的id。查看了以下 stack overflow 的帖子...

下面是一些有用的操作：

  1. 打开 package.json 文件，在 'jest' 中添加以下内容（也附加了截图）:

"moduleNameMapper": {
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy" }

enter image description here

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

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

    因此，要运行测试，它将是：

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

    希望它能像对我有用一样帮助其他人...

    0
    如果你确实需要使用异步函数，那么上面的解决方案应该可以工作。另一种解决方法是使用普通的 Promise，至少对我来说是这样。
    0
    在我的情况下，当我在顶部执行import "core-js/stable"; import "regenerator-runtime/runtime";并安装其依赖项时，它运行良好。
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接