Question 73078 in Reactjs Question posted in
The new location for the React Documentation can be found here.

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

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:

enter image description here

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,[email protected],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.

Tags:

2

Answers


  1. 0

    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..

    Login or Signup to reply.
  2. 0

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search