프로젝트에서 개발을 하던 중 그림처럼 ResizeObserver loop limit exceeded라는 오류가 발생하였는데, 구글링을 해보니 ResizeObserver가 무한루프를 돌며 발생하는 에러라고 한다.
mounted() {
window.addEventListener('resize', this.handleResize)
window.addEventListener('error', (e) => {
if (
e.message ===
'ResizeObserver loop Completed with undelivered notifications.' ||
e.message === 'ResizeObserver loop limit exceeded'
) {
e.stopImmediatePropagation()
}
})
},
→ mounted 부분
methods: {
handleResize() {
if (this.resizeTimeout) {
clearTimeout(this.resizeTimout)
}
this.resizeTimeout = setTimeout(() => {
const currentGridWidth = this.$refs.gridContainer.clientWidth
if (Math.abs(currentGridWidth - this.prevGridWidth) > 10) {
this.prevGridWidth = currentGridWidth
this.gridApi.sizeColumnsToFit()
}
}, 500)
}
}
→ methods 부분
<div ref = "gridContainer" >
<BaseTable : headers = " headers " : items = " list " : width = " width " : height = " height " : pagination = " true " : paginationPageSize = pageSize @ grid-ready = " onGridReady " @ first-data-rendered = " onFirstDataRendered " / >
</div >
→ 그리드 선언 부, ag-grid를 사용하였으며, BaseTable컴포넌트를 만들어서 선언함.
※ 해결방법
구글링을 해보니 해당 오류는 무시하라는 글이 많았다. 그 글을 보고 개발자 도구를 보니 에러메시지가 콘솔에 찍히지 않았다. 그래서 맨 위에 나오는 overlay를 끄면 되겠구나 하는 생각에 root폴더의 vue.config.js에 아래 코드를 추가했다.
devServer: {
client:{overlay : false}
}