-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ResizeObserver loop error in react error overlay in dev mode #8733
Comments
I am also seeing this issue using |
I opened #8744 with a fix from the StackOverflow thread. I don't like this workaround but the alternative would be to revert the change, returning to the legacy method of getting dimensions. Could you check if the error is gone now? You can use the packages from https://ci.codesandbox.io/status/mui/mui-x/pr/8744/builds/371270. See https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#how-can-i-use-a-change-that-wasnt-released-yet for how to use the package from CodeSandbox. |
@m4theushw : For information : same thing with [Masonry] component from material-ui #36909 |
@m4theushw adding this build made the error go away |
not sure if it is relevant but in a project i had that uses ResizeObserver, I call a useState setter in the ResizeObserver's callback and didn't get this loop error. that is one possible alternative to the requestAnimationFrame, but the requestAnimationFrame may be ok too |
@cmdcolin We do the same. Our ResizeObserver callback also updates a state. mui-x/packages/grid/x-data-grid/src/components/base/GridBody.tsx Lines 90 to 92 in a4454b2
mui-x/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts Lines 243 to 244 in a4454b2
mui-x/packages/grid/x-data-grid/src/hooks/features/dimensions/useGridDimensions.ts Line 311 in a4454b2
|
Duplicates
Latest version
Steps to reproduce 🕹
Link to live example:
This requires cloning and running in dev mode to reproduce, production mode doesn't have the error overlay
https://github.com/cmdcolin/x-data-grid-resizeobserver-loop-error
Steps:
<DataGrid>
" to the componentThis only affects the very latest version of @mui/x-data-grid 6.2.1 with the ResizeObserver change
Note: in my larger project, I get this error without modifying source code, but this was the simplest way I found to reproduce the issue in a smaller project e.g. to add another datagrid to the page was the best way to reproduce it in this small example
Current behavior 😯
Creates a react-error-overlay saying "ResizeObserver loop limit exceeded"
This is a dev mode only phenomenon to create the large overlay
Expected behavior 🤔
It would be nice if there was no error from this. There may be workarounds such as this stackoverflow answer suggests https://stackoverflow.com/a/58701523/2129219, but there are tradeoffs to using that potentially, so might be worth considering alternative solutions
Noted by another user here #8091 (comment)
Context 🔦
I am using @mui/x-data-grid in dev mode in a create-react-app v5 instance, and it has these error overlays when a global error occurs
We could maybe configure our create-react-app config to ignore this error in dev mode, but we ship a library that uses x-data-grid and it is difficult to tell people to use a particular create-react-app v5 config for example
Your environment 🌎
Unable to complete the npx @mui/envinfo, but the yarn.lock in the linked repo should be reproducible
Chromium Version 112.0.5615.49 (Official Build) snap (64-bit)
Firefox Nightly 114.0a1 (2023-04-23) (64-bit)
Order ID or Support key 💳 (optional)
No response
The text was updated successfully, but these errors were encountered: