ResizeObserver loop limit exceeded at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:296:58)
时间: 2023-09-29 17:03:39 浏览: 33
这个错误通常是由于使用了 ResizeObserver API 而导致的,它会在某些情况下触发无限循环,从而导致浏览器崩溃。解决这个问题的方法是尽可能避免在 DOM 元素大小发生变化时频繁调用 ResizeObserver,可以使用 debounce 或 throttle 等技术来限制触发次数。另外,也可以通过升级浏览器或者使用 Polyfill 来解决该问题。
相关问题
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中添加以下代码段:
```javascript
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.