material-ui: [Masonry] ResizeObserver loop limit exceeded

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Cannot be reproduced in a CodeSandbox or StackBlitz, because the virtual browser does not display the error.

Steps:

Create React App : npx create-react-app masonry-app
Install @mui/lab packages : npm install @mui/lab @mui/material @emotion/react @emotion/styled
Edit the file src/App.js with the following code

import "./App.css";

import { useState } from 'react';
import { Box } from "@mui/material";
import Masonry from "@mui/lab/Masonry";
import { LoadingButton } from '@mui/lab';
import Paper from "@mui/material/Paper";
import { styled } from "@mui/material/styles";

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === "dark" ? "#1A2027" : "#fff",
  ...theme.typography.body2,
  padding: theme.spacing(0.5),
  textAlign: "center",
  color: theme.palette.text.secondary,
}));

function App() {

const [heights, setheights] = useState([150, 30, 90, 70, 110, 150, 130, 80, 50, 90, 100, 150, 30, 50, 80]);

const addItem = () => {
  const updatedItems = [...heights];
  updatedItems.push(300);
  setheights(updatedItems);
};

  return (
      <>
      <Masonry
        columns={{ xs: 2, sm: 3, md: 4, lg: 5, xl: 6 }}
        spacing={2}
      >
        {heights.map((height, index) => (
          <Item key={index} sx={{ height }}>
            {index + 1}
          </Item>
        ))}
      </Masonry>
      <LoadingButton id="loadMore" size="large" variant="contained" onClick={addItem}>
        Add Item
      </LoadingButton>
      </>
  );
}

export default App;

Run the app : npm start

Current behavior 😯

When we refresh the page, we get message error Compiled with problems: ResizeObserver loop limit exceeded at http://127.0.0.1:3000/static/js/bundle.js

If I use this same code in a larger project, I have the same problem, but the error remains displayed.

Also, this happen with Chrome and Edge, not tested on others.

Expected behavior 🤔

There should be no errors

Context 🔦

Note: If I dynamically add an element in the Masonry, I get the error again. Apparently, this problem occurs when recalculating the width and height of the Masonry.

I noticed too, that if I put a 100% width on the objects returned by the Masonry, it is worse, it creates a loop with this error until memory saturation.

Unfortunately I don’t have a solution to this problem 😦 @hbjORbj : Could you may have a look please ? I hope someone can help me.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.10 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
  Binaries:
    Node: 16.19.1 - /usr/bin/node
    Yarn: Not Found
    npm: 8.19.3 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.6 => 11.10.6 
    @emotion/styled: ^11.10.6 => 11.10.6 
    @mui/base:  5.0.0-alpha.125 
    @mui/core-downloads-tracker:  5.12.0 
    @mui/lab: ^5.0.0-alpha.126 => 5.0.0-alpha.126 
    @mui/material: ^5.12.0 => 5.12.0 
    @mui/private-theming:  5.12.0 
    @mui/styled-engine:  5.12.0 
    @mui/system:  5.12.0 
    @mui/types:  7.2.4 
    @mui/utils:  5.12.0 
    @types/react:  18.0.35 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript:  4.9.5

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 26 (8 by maintainers)

Most upvoted comments

Hello everybody, while waiting that the MUI team decides to fix or simply to answer my messages, here is a piece of code which makes temporarily the trick and that does not block you in your development.

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');
          }
      }
  });
}, []);

+18

SanNic20 on May 3, 2023

@SanNic20 I am aware that you reported multiple issues with Masonry component, and I appreciate it. Still, I will reduce the scope of this issue to “ResizeObserver loop limit exceeded error is thrown when dynamically updating masonry children or refreshing the browser.”.

I have opened a PR for the fix here

hbjORbj on May 8, 2023

@hbjORbj have you had a chance to look at your pr?

icon2341 on Jun 10, 2023

MUI X DataGrid went with the same solution though. Ref: https://github.com/mui/mui-x/pull/8744 Should we proceed with merging the PR? @mnajdova

Approved, @hbjORbj left just one comment for clarifying the need for the new line

mnajdova on May 29, 2023

I’m experiencing the same error (mui 5.11.16, react 18.2.0).

Voraque on Apr 26, 2023

FYI - I am seeing the same error (currently using 5.11.15).

dpoehls on Apr 17, 2023

I just switched to using ImageList with the ‘masonry’ variant… I know maybe not exactly the same, but does not have this issue.

kurtfm on May 24, 2023

MUI X DataGrid went with the same solution though. Ref: https://github.com/mui/mui-x/pull/8744 Should we proceed with merging the PR? @mnajdova

hbjORbj on May 16, 2023

It is not a good experience for us having this error thrown up. Dev Tools will constantly throw this to the UI, and Application Insights picks it up and logs it, so it’s not really ‘ignorable’.

stevencreaney on May 10, 2023

I think that’s a valid concern. According to this (https://stackoverflow.com/a/50387233), we can ignore the error. The functionality doesn’t get affected by the error.

I would be curious to hear what the community thinks. If we decide to go with this road, we will need to have this documented somewhere on the Masonry page.

mnajdova on May 10, 2023

I will look into this today.

hbjORbj on May 8, 2023

@hbjORbj can you look into this soon?

mnajdova on May 8, 2023

Also experiencing this issue. Using chrome, mui/material 5.12.2, mui/lab 5.0.0-alpha.128, and react 18.1.0

StanLi-TomTom on May 2, 2023

Also experiencing this issue. Using chrome, mui/material 5.12.2, mui/lab 5.0.0-alpha.128, and react 18.2.0

It is more likely to occur when I have 1 or more useEffect on a page.

aidan-mundy on Apr 30, 2023

Getting the same issue here

ImOnMars on Apr 24, 2023