How to stop React Overlay from appearing on a specific error

Question

I am trying to stop ResizeObserver loop limit exceeded error from showing up on my development enviornment of my react application.

The error is benign

How can I get React to stop showing this in my application when in development? It does not show up in production builds.

I have tried adding this code to the top-level of my application at index.tsx:

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

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

The console.log(event.message) is being executed and the error name that it outputs is correct. But the react overlay error still appears.

Answer 1

If you are using webpack, you can configure it not to show overlay on this error. To do this you can add in field: "client", which is inside field "devServer", this config:

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

Here's the docs about it: https://webpack.js.org/configuration/dev-server/#overlay .

Answer 2

After playing around with it, I resorted to manually downgrading all my dependencies, still not sure which one is but if you are dealing with this that is something you can try.

I went through each dependency and rolled it back until the error stopped, it was an incredibly arduous process as I had to run npm install for each and find the old version number on npm's website.

Answer 3

I had the same problem. I used an old version of React and the following syntax in the index.js file:

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

Solution:

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