如何阻止 React Overlay 出现在特定错误上

Question

我正试图阻止

ResizeObserver loop limit exceeded

错误出现在我的反应应用程序的开发环境中。

错误是良性的

我怎样才能让 React 在开发时停止在我的应用程序中显示这个？它不会出现在生产版本中。

我已经尝试将此代码添加到我的应用程序的顶层

index.tsx

：

window.addEventListener('error', event => {

    if (event.message.includes('ResizeObserver loop limit exceeded')) {
        event.preventDefault();
        event.stopPropagation();
        console.log(event.message)
    }
});

console.log(event.message)

正在执行，它输出的错误名称是正确的。但是反应覆盖错误仍然出现。

Answer 1

玩弄它之后，我求助于手动降级我所有的依赖项，但仍然不确定是哪一个，但如果你正在处理这个，你可以尝试一下。

我遍历了每个依赖项并将其回滚直到错误停止，这是一个非常艰巨的过程，因为我必须为每个依赖项运行

npm install

并在 npm 的网站上找到旧版本号。

Answer 2

我有同样的问题。我在 index.js 文件中使用了旧版本的 React 和以下语法：

ReactDOM.render(
<BrowserRouter>
    <Provider store={store}>
      <PersistGate loading="null" persistor={persistor}>
       <App />
      </PersistGate>
</Provider>
</BrowserRouter>,
document.getElementById('root')
  );

解决方案：

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
  <Provider store={store}>
    <PersistGate loading="null" persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
  </BrowserRouter>,
);

Answer 3

如果您使用的是 webpack，您可以将其配置为不显示此错误的覆盖。为此，您可以添加字段：“client”，它位于“devServer”字段内，此配置：

      overlay: {
    runtimeErrors: (error) => {
      if (error.message === "ResizeObserver loop limit exceeded") {
        return false;
      }
      return true;
    },
  },

这是关于它的文档：https://webpack.js.org/configuration/dev-server/#overlay.