ResizeObserver loop completed with undelivered notifications.

[aitrx]

Version

5.0.8

Reproduction link

github.com

Environment info

 System:
    OS: Windows 10 10.0.19045
    Node: 18.18.2 - D:\Program Files\nodejs\node.EXE

Steps to reproduce

Step1

npm install

Step2

npm run serve

Step3

Press the ESC key on your keyboard。

Display error message

Uncaught runtime errors:

ERROR
ResizeObserver loop completed with undelivered notifications.
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

Replenishment

It seems likely that it will appear after each page refresh

What is expected?

nothing

What is actually happening?

Uncaught runtime errors:
ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

---

Step1：vue create xxx
Step2：installation...
Step3:：npm run serve
Finally, all the pages are accessed normally。
Well, when I press the "Esc " key on the keyboard, the following exception is thrown:

Uncaught runtime errors:

ERROR
ResizeObserver loop completed with undelivered notifications.
at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

[romanagh]

Hi,

I faced the very same problem. I added this code to the beginning of my app.vue and the error hasn't come back since then:

//Stop error resizeObserver
const debounce = (callback: (...args: any[]) => void, delay: number) => {
let tid: any;
return function (...args: any[]) {
const ctx = self;
tid && clearTimeout(tid);
tid = setTimeout(() => {
callback.apply(ctx, args);
}, delay);
};
};

const _ = (window as any).ResizeObserver;
(window as any). ResizeObserver = class ResizeObserver extends _ {
constructor(callback: (...args: any[]) => void) {
callback = debounce (callback, 20);
super(callback);
}
};

This code ensures that when a ResizeObserver is created, the provided callback function is debounced with a 20ms delay. This debouncing can help in handling and preventing excessive calls to the callback, especially in scenarios where the ResizeObserver can be triggered frequently.

Roman

[aitrx]

I tried it again, Google is Ok, Edge exists

[moabtools]

Found simple solution here

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    client: {
      overlay: {
        warnings: false,
        errors: false,
      },

      // or
      overlay: false, <---- this worked for me
    }
  }
})

[EricRagon]

romanagh solution is better because it solves the issue by correcting the error, while moabtools' one simply hides it (and all other runtime issues displayed on the overlay, by the way).
Romanagh's solution worked for me, and I can still have the benefits of the overlay error display.

[dhalenok]

Here's another possible solution, which is similar to @moabtools, but only disables specific errors:

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          const ignoreErrors = [
            "ResizeObserver loop limit exceeded",
            "ResizeObserver loop completed with undelivered notifications.",
          ];
          if (ignoreErrors.includes(error.message)) {
            return false;
          }
          return true;
        },
      },
    },
  },
};

https://webpack.js.org/configuration/dev-server/#overlay

[waytothevenus]

I've fixed this problem 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);`

[zanzara]

Hi,

I faced the very same problem. I added this code to the beginning of my app.vue and the error hasn't come back since then:

//Stop error resizeObserver const debounce = (callback: (...args: any[]) => void, delay: number) => { let tid: any; return function (...args: any[]) { const ctx = self; tid && clearTimeout(tid); tid = setTimeout(() => { callback.apply(ctx, args); }, delay); }; };

const _ = (window as any).ResizeObserver; (window as any). ResizeObserver = class ResizeObserver extends _ { constructor(callback: (...args: any[]) => void) { callback = debounce (callback, 20); super(callback); } };

This code ensures that when a ResizeObserver is created, the provided callback function is debounced with a 20ms delay. This debouncing can help in handling and preventing excessive calls to the callback, especially in scenarios where the ResizeObserver can be triggered frequently.

Roman

@romanagh
Thx for sharing. Pretty genius ur solution.
[Q]: Why you have put let tid: any; outside the fct? This I don't understand quite well.

[denioclecio]

Here's another possible solution, which is similar to @moabtools, but only disables specific errors:

module.exports = {
  //...
  devServer: {
    client: {
      overlay: {
        runtimeErrors: (error) => {
          const ignoreErrors = [
            "ResizeObserver loop limit exceeded",
            "ResizeObserver loop completed with undelivered notifications.",
          ];
          if (ignoreErrors.includes(error.message)) {
            return false;
          }
          return true;
        },
      },
    },
  },
};

https://webpack.js.org/configuration/dev-server/#overlay

WORKEEED! in vue.config.js