-
-
Notifications
You must be signed in to change notification settings - Fork 299
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
[BUG] ResizeOvserver loop limit exceeded - webpack-dev-server related #875
Comments
I need a reproduction to fix this. In general, this error is to be ignored, but I can't say if there's something else happening. Can you isolate in a sandbox? |
@martinchrzan-workday - did you find something? Let me know once you get to that. |
Hi @petyosi @martinchrzan-workday, I was able to reproduce the issue here: https://github.com/dylanwulf/virtuoso-error. |
Thank you @dylanwulf - I managed to reproduce that on my side. For reliable reproduction, longer items should be used so that variance in item heights is present. To start off with the most important part, the error is "harmless", it just denotes that certain updates could not be executed in a frame. See this response in StackOverflow. Next thing I found out is that upgrading the version of React to the latest one and changing the initiation script to the recommended React 18 import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";
import App from "./App";
const root = createRoot(document.getElementById("root"))
root.render(<App />); With that in mind, I think that the component should work without any issues in new setups, and the problem is present when a certain combination of react versions, react scripts and react initiation techniques are used. I will, however, re-open this issue. The examples in the website need to be updated to the above and to the latest react version. Let me know if changing the initiation script works for you. If it does not, I may suggest you remain at an older version of virtuoso and react-scripts. |
Hey there, I also have this issue, Using React 17.0.2 with electron, I found that react-virtuoso was the issue, even after I updated to 4.2.1 , and your fix with useMemo. This is just a debug issue and not in production. I found that wrapping the https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/58701523#58701523 line 467 in your index.mjs i am now doing this return new ResizeObserver((entries) => {
// We wrap it in requestAnimationFrame to avoid this error - ResizeObserver loop limit exceeded
window.requestAnimationFrame(() => {
if (!Array.isArray(entries) || !entries.length) {
return;
}
// your code
const element = entries[0].target;
if (element.offsetParent !== null) {
callback(element);
}
});
}); |
@iamterryclark My guess is that some development mode utility is eagerly catching this error and promoting it when it should not. Something similar was happening with react-beautiful-dnd. Regarding your suggestion: unfortunately, I've tested the route of If you can reproduce the problem in something I can run, it will help me help you a lot. Electron is not my jam, though. |
@iamterryclark Forgot to mention - notice that v4.2.1 does not fix this problem :) but something else I discovered while testing. Right now, I believe it's a setup problem, not something that can be addressed from within the component (unfortunately). |
Thanks for getting back so promptly, I forgot to mention also that I am using virtuoso with Trying to reproduce the sample inside codesandbox.io, but not able to see this issue just yet. That does suggest to me also what you mentioned about the error capture. https://codesandbox.io/s/mystifying-water-57173v I tried to apply the |
@iamterryclark I don't think it will be reproducible in a sandbox. I suspect react-scripts in a local environment being the culprit. Give it a try, happy to see if there's something that can be fixed or at least "officially" worked around. the sandbox above seems unsaved, did I miss something? |
sorry missing character ^^ edited ill try this locally also and see if I can get a reproducible example |
Some more info I found: looks like this error started showing up with |
Thanks for the investigation, I can confirm that |
Folks, thanks for your help here, it looks like there's not much that can be done on the component level. If someone finds something different, let me know. |
It appears this bug has popped up again in v4.7.0. It does not present in v4.6.3 for me. |
@mankittens I will need a bit more from your side, there are several different topics discussed in this issue. Can you can open a new one with a reproduction? |
I've just installed this library and noticed this error too. In my case, I use if (isInDevelopment) {
global.ResizeObserver = (await import("@juggle/resize-observer")).ResizeObserver;
} I'm actually using this because I also have a bug with another library using In the docs of |
…erlay (#5943) Brought a temporary solution from petyosi/react-virtuoso#875 (comment)
We had to revert Is there anything specific that we can fix in the app to avoid this? |
same |
@trainoasis @nowaylifer Did any of you bring this to Cypress? |
Describe the bug
After upgrading to 4.2.0 (upgraded from 4.0.9), I am getting this error locally immediately on loading React-Virtuoso component
It seems like I can just close this error overlay, but it always come back as I scoll in the list and load new items.
Reproduction
Happens immediately upon landing on the react-virtuoso component
Expected behavior
Not getting the error.
Screenshots
![Screenshot 2023-04-05 at 13 39 35](https://user-images.githubusercontent.com/93981583/230070288-15090183-8996-48e0-aca4-5e8459d32b6b.png)
Desktop (please complete the following information):
The text was updated successfully, but these errors were encountered: