ResizeObserver loop completed with undelivered notifications.

[webToLiu]

Bug report

Webpack-dev-server version 4.12.0 causes compile errors in application on browser viewport resize.

Actual Behavior

We run an application which uses webpack-dev-server 4.12.0 as a dependency. With this version of webpack-dev-server, whenever we resize the browser viewport in our application (e.g. by opening developer tools), an error overlay pops up stating "ResizeObserver loop completed with undelivered notifications.". This behaviour does not occur in the exact same version of the application that uses webpack-dev-server version 4.11.1.

Expected Behavior

The error should not appear when resizing the browser viewport in any way.

How Do We Reproduce?

1、Run an application that uses webpack-dev-server version 4.12.0; 2、Open developer tools in the browser.

Please paste the results of npx webpack-cli info here, and mention other relevant information

[alexander-akait]

Sorry, we can't fix it here, it is a bug on your side, please read https://github.com/webpack/webpack-dev-server/issues/4771

[alexander-akait]

You can look at our source code and we don't use ResizeObserver, it means some package doesn't implement ResizeObserver correctly

[waytothevenus]

I've fixed like this.

`import { ResizeObserver } from '@juggle/resize-observer';

const ro = new ResizeObserver((entries, observer) => { // Changing the body size inside of the observer // will cause a resize loop and the next observation will be skipped document.body.style.width = '50%'; });

// Listen for errors window.addEventListener('error', e => console.log(e.message));

// Observe the body ro.observe(document.body);`

[WBetancur]

I'm encountering an issue that only occurs on iOS devices (iPhone, iPad). The error seems to be coming from webpack, but I'm not explicitly using ResizeObserver. I suspect the issue might be related to one of the technologies I'm using (Bootstrap, Tabulator, Vue.js), but I'm struggling to pinpoint the exact source of the error. Could you help me with this problem, considering my context and the technologies involved?

[brendanahart]

@WBetancur I've encountered the same issue only on iOS devices. I created a hook in my react application to use in the component where is error was occurring (https://github.com/petyosi/react-virtuoso/issues/1049#issuecomment-2007256654) and that suppressed the error but webpack still raised runtime errors.

Putting this in my webpack build config at the top level fixed everything:

devServer:{
    client: {
        overlay: {
            errors: true,       // Show critical errors
            warnings: false,    // Suppress warnings
            runtimeErrors: false, // Suppress runtime errors like ResizeObserver errors
        },
    },
}