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

Posted

技术标签:

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

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

【问题讨论】:

这是 babel 配置的问题。查看更多:***.com/questions/53477466/… module.exports = 预设:['@babel/preset-env', '@babel/preset-react'], ; - 此代码在我的 babel.config.js 文件中,每当我向其中添加插件和 sourceMap 时,我的 nodemon 停止工作显示应用程序在启动前崩溃等待文件更改,当我删除插件时,modemon 将开始工作,然后服务器是正在运行.. @Akber 这个好像和测试无关,javascript测试框架的正确标签是jestjs。 【参考方案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。检查了以下堆栈溢出帖子...

Babel 6 regeneratorRuntime is not defined Babel 7 - ReferenceError: regeneratorRuntime is not defined

以下操作有所帮助:

    转到 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"]

更多信息: https://babeljs.io/docs/en/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"导入默认导出 它对我有用,谢谢!

以上是关于未捕获的 ReferenceError:RegeneratorRuntime 未在 React 中定义的主要内容,如果未能解决你的问题,请参考以下文章

PhoneGap 错误 - “未捕获的 ReferenceError:cordova 未定义”

未捕获的 ReferenceError:“$ 未定义”[重复]

未捕获的 ReferenceError:未定义窗口

未捕获的 ReferenceError:未定义 url

未捕获的 ReferenceError:未定义 showCategory

未捕获的 ReferenceError:$ 未定义 [重复]