ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

这个错误通常发生在使用 `ResizeObserver` API 监听 DOM 元素尺寸变化时，由于多次修改元素大小导致 `ResizeObserver` 进入了死循环，从而触发了 Chrome 浏览器的保护机制，导致页面崩溃。

解决此问题的方法是合理使用 `ResizeObserver` API，避免频繁修改元素大小，或者手动清除观察者，以避免进入死循环。此外，也可以考虑使用其他的元素尺寸变化监听方法，比如 `window.onresize` 事件。

相关问题

at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:322:7)

在报错信息中，"at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:322:7)"是指错误发生的位置，具体是在webpack-dev-server的overlay.js文件的第322行的eval函数中。这个错误通常是由于观察元素的大小变化导致的循环问题引起的。为了解决这个问题，可以做以下操作：
1. 在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);
  }
}

这段代码的作用是创建一个函数节流的工具函数，并修改ResizeObserver类的构造函数，使其使用函数节流来处理观察元素大小变化的回调函数。

通过以上操作，你可以解决报错信息中指出的位置的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [handleError@webpack-internal:///./node_modules/webpack-dev-server](https://blog.csdn.net/weixin_46525113/article/details/130864747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [element-plus 报错 ResizeObserver loop limit exceeded 解决](https://blog.csdn.net/qq_45112637/article/details/131740110)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [xhr-eval-chunk-webpack-plugin:通过XHR + eval加载块，而不是创建 elements](https://download.csdn.net/download/weixin_42106357/18703553)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]

ERROR ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)

This error message indicates that the ResizeObserver loop limit has been exceeded. This can happen when a component or element is being constantly resized, causing the observer to trigger too frequently and exceed its limit.

To fix this error, you can try to optimize the resizing behavior of the element or component causing the issue. This may involve reducing the frequency of resizing events or using a different method to track size changes.

Alternatively, you can try increasing the limit of the ResizeObserver loop by editing the browser configuration. However, this may not be the best solution as it can lead to performance issues and may not be supported by all browsers.