ResizeObserver loop limit exceeded in Chromium browsers

[thoffmann-fms]

Bug report

Starting with version 4.12.0 and newer, my React app is showing "ResizeObserver loop limit exceeded". Works fine with 4.11.
Edge versions 111.0.1661.62 & 114.0.1777.0 fail
Chrome version 114.0.5696.0 & 111.0.5563.147 fail
Vivaldi version 5.7.2921.65 fail

Firefox 113.0a1 (2023-04-05) works fine

Actual Behavior

Expected Behavior

Error should not happen.

How Do We Reproduce?

Failure line is var errorObject = error instanceof Error ? error : new Error(error || message);

            _overlay_runtime_error_js__WEBPACK_IMPORTED_MODULE_1__.listenToRuntimeError)(function(errorEvent) {
                // error property may be empty in older browser like IE
                var error = errorEvent.error
                  , message = errorEvent.message;
                if (!error && !message) {
                    return;
                }
                var errorObject = error instanceof Error ? error : new Error(error || message);
                overlayService.send({
                    type: "RUNTIME_ERROR",
                    messages: [{
                        message: errorObject.message,
                        stack: (0,
                        _overlay_runtime_error_js__WEBPACK_IMPORTED_MODULE_1__.parseErrorToStacks)(errorObject)
                    }]
                });
            });
            return overlayService;

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

System:
    OS: Windows 10 10.0.19044
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H       
    Memory: 36.54 GB / 63.68 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.1.3 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.62)
    Internet Explorer: 11.0.19041.1566
  Packages:
    clean-webpack-plugin: ^4.0.0 => 4.0.0
    copy-webpack-plugin: ^11.0.0 => 11.0.0
    css-loader: ^6.7.3 => 6.7.3
    css-minimizer-webpack-plugin: ^4.2.2 => 4.2.2
    file-loader: ^6.2.0 => 6.2.0
    html-loader: ^3.1.2 => 3.1.2
    html-webpack-plugin: ^5.5.0 => 5.5.0
    less-loader: ^11.1.0 => 11.1.0
    postcss-loader: ^7.2.4 => 7.2.4
    progress-webpack-plugin: ^1.0.16 => 1.0.16
    react-hot-loader: ^4.13.1 => 4.13.1
    source-map-loader: ^3.0.2 => 3.0.2
    ts-loader: ^9.4.2 => 9.4.2
    webpack: ^5.77.0 => 5.77.0
    webpack-cli: ^4.10.0 => 4.10.0
    webpack-dev-server: ^4.12.0 => 4.12.0
    webpack-merge: ^5.8.0 => 5.8.0

[alexander-akait]

Sorry, it works as expected, please read #4771, you can disable runtimes errors

[thoffmann-fms]

Release 8.1.1 - disable `runtimeErrors` in webpack-dev-server overlay by redbugz · Pull Request #336 · fs-webdev/create-react-app (github.com)<fs-webdev/create-react-app#336> refers to a new setting “client.overlay.runtimeErrors” but no clue as to where that setting is to be set. E.g. what file has this setting in it, someplace in webpack.js? Tim Hoffmann Sr. Software Engineer FM:Systems From: Alexander Akait ***@***.***> Sent: Wednesday, April 5, 2023 12:30 PM To: webpack/webpack-dev-server ***@***.***> Cc: Timothy Hoffmann ***@***.***>; Author ***@***.***> Subject: Re: [webpack/webpack-dev-server] ResizeObserver loop limit exceeded in Chromium browsers (Issue #4804) CAUTION [This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe] Sorry, it works as expected, please read #4771<#4771>, you can disable runtimes errors — Reply to this email directly, view it on GitHub<#4804 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGZZJPZ5Z4W4CNOBANL46UDW7WMZXANCNFSM6AAAAAAWUGR24I>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

[thoffmann-fms]

Ok, dug through the source code and found it. It’s in the webpack.js file with this hierarchy: module.exports = { devServer: { client: { overlay: { errors: true, warnings: false, runtimeErrors: false, }, }, }, Tim Hoffmann Sr. Software Engineer FM:Systems From: Alexander Akait ***@***.***> Sent: Wednesday, April 5, 2023 12:30 PM To: webpack/webpack-dev-server ***@***.***> Cc: Timothy Hoffmann ***@***.***>; Author ***@***.***> Subject: Re: [webpack/webpack-dev-server] ResizeObserver loop limit exceeded in Chromium browsers (Issue #4804) CAUTION [This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe] Sorry, it works as expected, please read #4771<#4771>, you can disable runtimes errors — Reply to this email directly, view it on GitHub<#4804 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AGZZJPZ5Z4W4CNOBANL46UDW7WMZXANCNFSM6AAAAAAWUGR24I>. You are receiving this because you authored the thread.Message ID: ***@***.******@***.***>>

[alexander-akait]

If you don't need overlay you can use this:

module.exports = {
  devServer: {
    client: {
      overlay: false
    },
  },