Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Operating environment:vue3 js

Error content: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)

Cause of error:"ResizeObserver loop completed with undelivered notifications" is usually related to the browser's ResizeObserver API. This error usually occurs when the ResizeObserver callback function triggers a large number of reflows or repaints when handling page or element size changes, which in turn trigger more size changes, forming an infinite loop or at least an extremely inefficient loop.

Because I am using Ant Design Vue's table component (a-table), I need to adjust the table width as needed. This error may be reported when the table tries to recalculate or re-render when the size changes.(webpack will report an error when adaptive window size)

Solution: Add the following content to the vue.config.js file (restart the project after adding it)

 client: {

      overlay: false

 },

!!!Notice:When overlay is set to false, even if Webpack encounters errors or warnings during compilation, these will not be displayed as an overlay on the browser page. This means that you will need to use other methods (such as viewing the browser console or Webpack's terminal output) to get these error messages.