Open aitrx opened 11 months ago
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
I tried it again, Google is Ok, Edge exists
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
}
}
})
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.
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;
},
},
},
},
};
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);`
Version
5.0.8
Reproduction link
github.com
Environment info
Steps to reproduce
Step1
Step2
Step3
Press the
ESC
key on your keyboard。Display error message
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)