[BUG] ResizeObserver loop completed with undelivered notifications.

[pengx17]

Describe the bug It seems https://github.com/petyosi/react-virtuoso/commit/57928bd729fb62749d2d46ac347e36cfe0d54f31 caused ResizeObserver loop completed with undelivered notifications. in my project. I have this assumption because the issue is gone after downgrading from v4.7.0 to v4.6.3.

I haven't looked through the issue yet nor have a way to reproduction on codesandbox. Will keep you updated.

[petyosi]

Post an update to this issue when it's actionable. It might be related to your setup, so you can also use a sample repository for reproduction if necessary. Closing for now.

[Methuselah96]

I am also seeing this error in our Cypress tests (haven't been able to reproduce outside of Cypress yet).

[wilomgfx]

Seems like I'm also getting the issue after upgrading from 4.6.3 to 4.7.0. Same issue with 4.7.1.

I will create a new issue with a codesandbox, if I'm able to reproduce there. It only happens locally with the webpack dev server when I open a page or happen to render a component that makes use of react-virtuoso

Uncaught runtime errors: ERROR ResizeObserver loop completed with undelivered notifications.

https://github.com/petyosi/react-virtuoso/issues/1043

[tylercraft]

I'm also encountering this. First time using this package, just set it up and am trying it locally, with a webpack dev server similar to the same setup @wilomgfx mentioned.

[petyosi]

@tylercraft @wilomgfx This is not a bug in Virtuoso. webpack dev server is catching a benign warning and displaying it as a compilation error. Refer to any of the following issues - I'm not sure which one of the approaches would work for your setups since you have not shared a working reproduction.

[wilomgfx]

@tylercraft @wilomgfx This is not a bug in Virtuoso. webpack dev server is catching a benign warning and displaying it as a compilation error. Refer to any of the following issues - I'm not sure which one of the approaches would work for your setups since you have not shared a working reproduction.

Fair enough, it's just a bit odd that the error started appearing only after upgrading past version 4.6.3.

Here's a working reproduction, FYI the error overlay only appears for a second with this fresh CRA setup. On ours, it lingers until we close it.

https://github.com/wilomgfx/react-virtuoso-resizeobserver-bug-report

Like mentioned in https://github.com/petyosi/react-virtuoso/issues/1043 yesterday, I was able to ignore the error like so in our webpack dev server configuration:

{
  overlay: {
    runtimeErrors: (error) => {
      if (error.message.includes("ResizeObserver loop completed with undelivered notifications")) {
        return false;
      }
      return true;
    },
  },
}

[petyosi]

@wilomgfx version v4.7.0 improved the rendering responsiveness of the component by switching to an the external store sync React hook. This means that users will see less whitespace when they scroll fast through the list. A side effect of that update is that the browser sometimes will report that as a warning, but webpack-dev-server does not ignore it (unless configured to).

Further reading on the matters https://github.com/w3c/csswg-drafts/issues/6173 and https://github.com/w3c/csswg-drafts/issues/6185 - @hilts-vaughan linked this here a few years ago. Unfortunately, it looks like there's no progress since then.

[wilomgfx]

@wilomgfx version v4.7.0 improved the rendering responsiveness of the component by switching to an the external store sync React hook. This means that users will see less whitespace when they scroll fast through the list. A side effect of that update is that the browser sometimes will report that as a warning, but webpack-dev-server does not ignore it (unless configured to).

Further reading on the matters w3c/csswg-drafts#6173 and w3c/csswg-drafts#6185 - @hilts-vaughan linked this here a few years ago. Unfortunately, it looks like there's no progress since then.

Thanks for the explanation, I will make sure to mention it in my PR to ignore this warning.