ResizeObserver loop completed with undelivered notifications.

Yehger2024-05-28 1:37

报错信息

来源

在用vue3 + element-plus写项目的时候报的错，经过排查法，发现是element-plus的el-table组件引起的错误。

经过初步排查，这个错误并不是vue以及element-plus发出的报错，因为其源码并未找到关于ResizeObserver loop相关的字眼，而且没有显示调用栈。

再次排查发现这也不是js的错误，因为控制台并未报出error。

再次查看报错信息，这个错误是从main.7a0c6016db8700d92d41.js:34638:58抛出的，如下图（我开了调试模式了）

如下图所示，通过查看其抛出错误信息的上下文，发现了这是webpack相关的代码，那么就可以确定，这个错误100%是webpack抛出的，虽然webpack为什么抛出这个错误的原因还是未知，但是我们可以通过防抖的方式解决。

解决代码如下，直接放到main.js的下方，能保证加载就行。

js 复制代码

import { debounce } from "lodash";
const resizeObserver  = (window).ResizeObserver;
(window).ResizeObserver = class ResizeObserver extends resizeObserver  {
  constructor(callback) {
    callback = debounce(callback, 100);
    super(callback);
  }
};