0

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

enter image description here

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.

Ashar Rahman
  • 127
  • 1
  • 2
  • 7

3 Answers3

2

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 .

Nikita Petrov
  • 96
  • 1
  • 3
0

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.

Ashar Rahman
  • 127
  • 1
  • 2
  • 7
  • 1
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 30 '23 at 05:36
  • @Ashar Rahman : Are you using @mui/lab package ? I got the same thing using Masonry from @mui/lab – NicoSan Apr 15 '23 at 15:37
  • @NicoSan YES! I @mui/lab was one of the dependencies that I rolled back meaning that it must have been that package. Glad to have confirmed it. – Ashar Rahman Apr 17 '23 at 07:36
  • 1
    @Ashar Rahman : For information, I have openned an [issue](https://github.com/mui/material-ui/issues/36909). Hope we can found a solution fastly. – NicoSan Apr 20 '23 at 18:21
0

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>,
);
Myroslav
  • 7
  • 1