未捕获的 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:“$ 未定义”[重复]