create-react-app 当使用`stopReportingRuntimeErrors`时,react-error-overlay破坏了代码热重载并抛出了一个错误,提示期望注入的选项,

gc0ot86w  于 20天前  发布在  React
关注(0)|答案(1)|浏览(21)

描述bug

react-error-overlay 调用 stopReportingRuntimeErrors 产生 Expected options to be injected. 错误,破坏了热重载。错误覆盖层没有按预期显示错误,但当代码中做任何更改时 - Expected options to be injected. 出现在控制台,热重载被破坏

重现步骤

  1. 在项目的开头从 react-error-overlay 包调用 stopReportingRuntimeErrors,如下所示:
import { stopReportingRuntimeErrors } from "react-error-overlay";

if (process.env.NODE_ENV === "development") {
  stopReportingRuntimeErrors();
}
  1. 然后在代码中做任何更改

预期行为

热重载正常工作并更新捆绑包

实际行为

错误在控制台 Expected options to be injected. 中抛出,热重载被破坏。

调查

通过调查源代码,看起来 stopReportingRuntimeErrors 在这里设置 currentRuntimeErrorOptions = null:https://github.com/facebook/create-react-app/blob/master/packages/react-error-overlay/src/index.js#L116
updateIframeContent 函数有检查它,这会抛出一个错误:https://github.com/facebook/create-react-app/blob/master/packages/react-error-overlay/src/index.js#L158
我在想这个检查是否有必要在那里?我看不到 currentRuntimeErrorOptionsupdateIframeContent 函数的作用域中使用。

6bc51xsx

6bc51xsx1#

请注意:一个解决方法(或者可能是预期的用法)是将你的 stopReportingRuntimeErrors() 放在你交给 module.hot.accept 作为第二个参数的回调函数中。例如:

module.hot.accept(‘App’, () => {
   // …some rendering…
  stopReportingRuntimeErrors()
}

**编辑:**刚刚在 react-scripts 4 上尝试了一下,是的,它在新快速刷新功能下确实出现了问题(我知道的没有解决办法)

相关问题