How to stop 'ResizeObserver loop limit exceeded' error from appearing in React app

Question

Recently, a new error started showing in my React application:

ResizeObserver loop limit exceeded

Seems that the general consensus is that the error is benign and there is nothing to worry about.

However, I am not sure how to ignore it or to get it to stop showing up when I am testing my program via npm start.

The screen that appears looks like this:

Is there any way to suppress this particular errror on this page or otherwise so I don't have to dismiss it every time?

The error comes from the MUI Masonry component i use but my understanding is it can come from many dependencies.

Here is the code in which I use it incase that helps in supressing this error.

import Masonry from '@mui/lab/Masonry';
import { Box } from '@mui/material';
import { ReactNode } from 'react';
import { BsFillPlusSquareFill as AddButton } from 'react-icons/bs';
import { useNavigate } from 'react-router';
import { LoadingIndicator } from '../LoadingIndicator';
import { BackButton } from './BackButton';
import styles from './SheskaList.module.css';

export const SheskaListContent = (props: { loading: boolean, cards: ReactNode[] }) => {
    const navigate = useNavigate();

    return (
        <Box className={styles.gridContainer}>
            <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200' />
            <div className={styles.pageTitleContainer}>
                <h1 className={styles.pageTitle}> Your Sheska List </h1>
                <AddButton size={'3em'} className={styles.addCardButton} onClick={() => {navigate('/newitem')}} />
            </div>
            <Masonry columns={{lg: 2, xs: 1}} spacing={3} id={styles.grid}>
                {
                    props.loading
                    ?
                    <LoadingIndicator />
                    :
                    props.cards[0] as NonNullable<ReactNode>
                }
                <BackButton key='back-button' location='/dashboard' text='Return to Home' />
                {
                    !props.loading
                    &&
                    props.cards.slice(1)
                }
            </Masonry>
        </Box>
    );
}

I have tried updating my dependencies and seeing if anybody else has had this issue on github but I could not find anything. Please let me know if there are any solutions i can try, I saw that it is possible to edit ESLINT configs but I really want to avoid ejecting my create-react-app.

score 10 · Answer 1 · answered May 03 '23 at 11:15

I had the same issue but with a virtualized list from react-virtuoso after updating webpack version to 5.x.x (https://github.com/petyosi/react-virtuoso/issues/254). based on the answer from Hai Nguyen Le (https://stackoverflow.com/a/76107850/3328233) I created a simpler version of it to only catch the ResizeObserver error:

    useEffect(() => {
    window.addEventListener('error', e => {
        if (e.message === 'ResizeObserver loop limit exceeded') {
            const resizeObserverErrDiv = document.getElementById(
                'webpack-dev-server-client-overlay-div'
            );
            const resizeObserverErr = document.getElementById(
                'webpack-dev-server-client-overlay'
            );
            if (resizeObserverErr) {
                resizeObserverErr.setAttribute('style', 'display: none');
            }
            if (resizeObserverErrDiv) {
                resizeObserverErrDiv.setAttribute('style', 'display: none');
            }
        }
    });
}, []);

using the setAttribute('style', 'display: none') method didn't work for me. Instead, remove() method for the element worked — DeeMeow, Jun 23 '23 at 08:29

Nikita Petrov · Answer 2 · 2023-05-19T06:27:14.167

6

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

      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 .

edited May 19 '23 at 06:27

answered May 19 '23 at 06:26

Nikita Petrov

96
1
3

This got me closer to my answer. I had to set `devServer.client.overlay` to `false`. – dmathisen May 22 '23 at 16:50

score 3 · Accepted Answer · answered Apr 10 '23 at 11:10

3

Had the same issue, it ended up to be due to the first element inside the Masonry component having 100% width, once I removed that (actually made it responsive under XS to be 100% - where it had no issue..) issue stopped..

answered Apr 10 '23 at 11:10

Roman

1,880
1
13
12

Same issue here, could you provide an example of your solution please ? – NicoSan Apr 15 '23 at 15:45
@NicoSan inside the Masonary component would do this.. – Roman Apr 17 '23 at 16:39
I don't know how much time this comment has just saved me but I'm sure it's a lot, thank you – kougami Jun 01 '23 at 18:55

score 2 · Answer 4 · answered Apr 26 '23 at 06:39

In your React App, push this code:

    useBeforeRender(() => {
    window.addEventListener("error", (e) => {
      if (e) {
        const resizeObserverErrDiv = document.getElementById(
          "webpack-dev-server-client-overlay-div",
        );
        const resizeObserverErr = document.getElementById(
          "webpack-dev-server-client-overlay",
        );
        if (resizeObserverErr)
          resizeObserverErr.className = "hide-resize-observer";
        if (resizeObserverErrDiv)
          resizeObserverErrDiv.className = "hide-resize-observer";
      }
    });
  }, []);

and create hooks: useBeforeRender

import { useEffect, useState } from "react";

export const useBeforeRender = (callback: any, deps: any) => {
  const [isRun, setIsRun] = useState(false);

  if (!isRun) {
    callback();
    setIsRun(true);
  }

  useEffect(() => () => setIsRun(false), deps);
};

use this in .scss or .css file:

.hide-resize-observer {
  display: none !important;
}

score 1 · Answer 5 · answered May 18 '23 at 11:46

1

I was getting this error because I was misusing the onFirstDataRenderered of ag-grid. This error may occur if you use onFirstDataRendered to call the sizeColumnsToFit method. Instead, you should use onGridReady

answered May 18 '23 at 11:46

behruz

570
4
13

score 1 · Answer 6 · answered Jun 20 '23 at 20:09

<script>
   window.addEventListener('error', function (e) {
    console.error(e.message);
       // prevent React's listener from firing
    e.stopImmediatePropagation();
      // prevent the browser's console error message
    e.preventDefault();
 });

Add this code to your index file and see result !

score 1 · Answer 7 · answered Jul 25 '23 at 15:57

If you're running AG Grid (as I am)...

This was a bug in v29.X that was logged as AG-8567 Grid shows error ResizeObserver loop limit exceeded

You can see this in the changelog: https://ag-grid.com/changelog/?searchQuery=8567

This issue is now fixed in AG Grid v30 and later.

user21784620 · Answer 8 · 2023-06-26T10:24:13.320

0

I was getting this error because in calling function , was calling the endpoint before state update.

Fix : After updating the state , calling the endpoint

edited Jun 26 '23 at 10:24

answered May 01 '23 at 05:23

user21784620

1
1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 02 '23 at 13:11

How to stop 'ResizeObserver loop limit exceeded' error from appearing in React app

8 Answers8