petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.13k stars 299 forks source link

[BUG] ResizeObserver loop completed with undelivered notifications on `Virtuoso` component render #1043

Closed wilomgfx closed 5 months ago

wilomgfx commented 5 months ago

Describe the bug When rendering a Virtuoso component, the following error is thrown in our dev env (webpack dev server 5.0.3). This only happens in version 4.7.1 and 4.7.0, the issue is not present in version 4.6.3

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

Reproduction FYI, I can't reproduce the issue on codesandbox, but it is the minimal amount of code I can put anywhere in our codebase to reproduce the issue.

https://codesandbox.io/p/sandbox/react-virtuoso-bug-resizeobserver-loop-error-rmdfvn?file=%2Fsrc%2FApp.js%3A10%2C15

import { Virtuoso as VirtualList } from "react-virtuoso";

export default function MyReactVirtuosoBug() {
  const data = new Array(1000).fill(null).map((_, index) => ({ index }));
  return (
      <div style={{ height: "400px" }}>
        <VirtualList data={data} itemContent={(index) => <div>{index}</div>} />
      </div>
  );
}

To Reproduce

  1. Open page containing the MyReactVirtuosoBug component
  2. See error

Expected behavior No error is thrown

Screenshots image

Desktop (please complete the following information):

Additional context From what I could find online, it's not an actual error, but more of a warning? https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors I have ignored it in our webpack config overlay property of the client portion of the dev server configuration.

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

Can you create a minimal sample repo with your setup?

petyosi commented 5 months ago

This brings nothing new to the conversation, and #1039 already exists.

wilomgfx commented 5 months ago

Can you create a minimal sample repo with your setup?

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

petyosi commented 5 months ago

Thank you for the reproduction.

I believe that this StackOverflow thread covers the possible workarounds, including the one you have mentioned (which, I believe, needs an ejection, which might not be very pleasant I guess).