Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ResizeObserver loop completed with undelivered notifications. #7431

Open
aitrx opened this issue Oct 30, 2023 · 7 comments
Open

ResizeObserver loop completed with undelivered notifications. #7431

aitrx opened this issue Oct 30, 2023 · 7 comments

Comments

@aitrx
Copy link

aitrx commented Oct 30, 2023

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
Copy link

romanagh commented Nov 4, 2023

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
Copy link
Author

aitrx commented Nov 9, 2023

I tried it again, Google is Ok, Edge exists

@moabtools
Copy link

moabtools commented Nov 9, 2023

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
Copy link

EricRagon commented Nov 16, 2023

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
Copy link

dhalenok commented Nov 21, 2023

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
Copy link

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
Copy link

zanzara commented Oct 10, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants