element-plus 报错 ResizeObserver loop limit exceeded 解决

最新推荐文章于 2025-02-07 15:50:47 发布

陈福国

最新推荐文章于 2025-02-07 15:50:47 发布

阅读量4.8k

点赞数 21

分类专栏：常见问题文章标签：陈福国陈福国前端 ResizeObserver limit exceeded element-plus报错

本文链接：https://blog.csdn.net/qq_45112637/article/details/131740110

版权

常见问题专栏收录该内容

20 篇文章

订阅专栏

使用Element-plus，页面重置大小时，出现如下报错：

Uncaught runtime errors: × ERROR ResizeObserver loop limit exceeded     at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:252:58)     at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:271:7)

在这里插入图片描述

错误是由 webpack引起的，出现在webpack-dev-server的overlay.js文件中。

这个错误通常是由于观察元素的大小变化导致的循环问题。要解决这个问题，很简单。

把下面代码粘在app.vue
或者main.js中都可以

const debounce = (fn, delay) => {
  let timer = null;
  return function () {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  }
}

const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
  constructor(callback) {
    callback = debounce(callback, 16);
    super(callback);
  }
}

在这里插入图片描述

搞定！！！