ResizeObserver loop limit exceeded

[RickLucassen]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

• Create eventlistener on "window" for "error". (window.addEventListener("error", (e) => console.error(e));)
• Render widget that renders a dropdown of some sort when clicking the input field.
• Click on the field.
• See "ResizeObserver loop limit exceeded" error message in console.

What is expected?

For the error not to be generated

What is actually happening?

Opening any kind of widget (dropdown) generates this error.

Environment	Info
antd	4.6.3
React	16.11.0
System	Ubuntu 20.04.1
Browser	Chromium 85.0.4183.83

[afc163]

@cyjake

react-component/resize-observer#18
react-component/align#72

[zombieJ]

Seems error has gone after refactor of rc-trigger & rc-motion.

[makarov-roman]

hi @zombieJ, is there any eta when those refactorings would make into release?

[makarov-roman]

hi @zombieJ, is there any eta when those refactorings would make into release?

[zombieJ]

@makarov-roman remove your lock file and reinstall.

[gynekolog]

@zombieJ Remove lock file is not a good solution.
You can make It better by deleting antd part only from the lock file and run yarn or npm-install again.
Or upgrade only concretely packages (rc-resize-observer, rc-align, rc-trigger, rc-motion ?)

[nigulasikk]

Seems error has gone after refactor of rc-trigger & rc-motion.

antd（v 4.16.9）中，还存在题主说的问题呢。例子：https://codesandbox.io/s/4ovng?file=/src/index.js

[citmusa]

Please reopen. As @nigulasikk shows this is still an issue

[scheinercc]

For completeness, the message text in Firefox and Safari reads:

ResizeObserver loop completed with undelivered notifications.

---

ResizeObserver loop limit exceeded

Is Chrome at all only

[hopperhuang]

will this bug be fixed?

[dingyc1022]

will this bug be fixed?

[1006223320]

will this bug be fixed?

[mqliutie]

mark

[alienzhangyw]

Error comes out when clicking Select input

[ishan123456789]

Hi I'm facing same error on Select component of antd version 4.17.2 any fix for this
#15075 (comment)

[github-actions]

Hello @RickLucassen. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @RickLucassen，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

[hsluoyz]

Any update on this?

[Tangjj1996]

So, what's the solution?

[medeirosjoaquim]

This error happens in different components since version 4.x, this issue is 3 years old and it seems it should have more attention. To me it happens when you have an icon on a menu item.

[tsingsun]

Any update , tired of it in debug

[luann112]

I'm being stucked with this issue, anyone have the solution? 🙏🏿🙏🏿🙏🏿

[xyy94813]

It is caused by rc-resize-observer@npm:1.3.1.

---

In my project, there are multiple versions of rc-resize-observer
After I try to use the same version of rc-resize-observer by this way:

yarn set resolution rc-resize-observer@npm:^1.0.0 1.3.1

Every component using rc-resize-observer will report this bug.

Between version 1.0.0 and version 1.3.1, rc-resize-observer refactored as a function component.

---

I was only able to catch this error with window.onerror.

[yoyo837]

Any one provide a new reproduce link can catch the error? Please!

[xyy94813]

Is the error, which can only be caught by window.onerror, due to the following code logic?

https://github.com/react-component/resize-observer/blob/fe320b1be8b17eef1c67cea3ff3fafa507d45b1c/src/SingleObserver/index.tsx#L88-L93

---

Note:

This looping error has caused a DDOS attack to our error reporting system.
You must to limit rate of report

[xyy94813]

Marker
https://stackoverflow.com/a/76254508

[Makentosh]

still have some problem
ResizeObserver loop completed with undelivered notifications.

"antd": "^4.21.7",
"react": "^17.0.2",

[dingchao-ihealth]

adding a fixed width or max-size worked for me.

[LiangZugeng]

In my case, scroll={{ x:true }} in a Table caused this, removed this setting and this issue is solved.

Not sure why I added this setting in the first place, and the page didn't show any difference after the removal of the setting, the document also didn't describe x: true clearly.

[rickvian]

adding a fixed width or max-size worked for me.

hi, what component is this, and is it ok if you provide the code example, it will help lots people here

[mMarcos208]

I remove yarn.lock and upgrade react, ant, react scripts and works for me.

[QF-study]

Seems error has gone after refactor of rc-trigger & rc-motion.

antd（v 4.16.9）中，还存在题主说的问题呢。例子：https://codesandbox.io/s/4ovng?file=/src/index.js

antd (v 4.24.9) 依然有

[YriiT]

i get this bug on table after update antd to v5.9.1
on 5.6.1 everything was all right

[Chevindu]

This is by no means a fix, but I was able to temporarily avoid this error by setting a fixed height to the culprit element. In my case it was the .ant-popover-inner-content of Popover. I'm hoping to migrate to Ant v5 soon, hopefully this will be patched by then.

Current versions:

• "antd": "4.24.13",
• "react": "18.2.0",

[gongwenlong]

+1， v5.5.2，v4.24.2就没这个问题

you are right

[samanthaburboz]

Facing the same problem
ResizeObserver loop completed with undelivered notifications.

"antd": "5.9.0",
"react": "^17.0.1",

Table and Modal component giving issue

import React from 'react';
import { Table } from 'antd';

const MyTable = ({ dataSource, columns, rowKey="id" ,defaultPageSize=10}) => {
return (
<Table
rowKey={rowKey}
dataSource={dataSource}
columns={columns}
scroll={{ x: 'max-content' }}
bordered
size="small"
/>
);
};

export default MyTable;

Works if use Table without scroll={{ x: 'max-content' }} or size="small"

[zmbxy]

遇到了同样的问题，希望能够得到修复

[augisd]

I was having the issue ResizeObserver loop completed with undelivered notifications in "antd": "^4.9.4".
It was caused by Table component, more specifically, the scroll={{ x: 'max-content' }} prop value, as mentioned above.
I needed this prop for my use case and found the following workaround for this error:

const CustomTable = ({ loading, dataSoure }) => {
  const [canScroll, setCanScroll] = useState(false);

  useEffect(() => {
    if (!loading && !!dataSource) {
      setCanScroll(true);
    }
  }, [loading, dataSource]);
  
  const scroll = canScroll
    ? {
        x: 'max-content',
      }
    : undefined;
    
  return <Table scroll={scroll} loading={loading} dataSource={dataSource} />;
}

Basically, only set the scroll prop once the data is available (in this case I'm using async data loading)

[LiliumCandidum]

I faced the same issue with the Table and the Popover component: I had a Popover inside a row of a table and when the Popover text was too long for the page size, the error appeared.
I fixed with calculating the Popover width based on the window width.

versions:

• antd: 4.24.8
• react: 18.2.0

[liyuyu0929]

现象：Table组件设置了scroll={{ x: 'max-content' }}或者scroll={{ x:true }}属性后点击菜单出现错误Modal弹窗，每次点击都会出现，错误信息如下

ERROR
ResizeObserver loop limit exceeded
    at handleError (http://localhost:3000/static/js/bundle.js:324281:58)
    at http://localhost:3000/static/js/bundle.js:324300:7

代码：

import React from 'react';
import { Table } from 'antd';

const MyTable = ({ dataSource, columns, rowKey="id" ,defaultPageSize=10}) => {
  return (
    <Table
      rowKey={rowKey}
      dataSource={dataSource}
      columns={columns}
      pagination={{
        defaultPageSize: defaultPageSize,
        pageSizeOptions: ['10','20','30','40','50','60','70','80','90','100','200','300','500'],
        showSizeChanger:true,
        showTotal:((total)=>{return `共${total}条`})
      }}
      scroll={{ x: 'max-content' }}
      bordered
      size="small"
    />
  );
};

export default MyTable;

package.json 配置文件

   ......
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "antd": "^5.6.1",
    "axios": "^1.4.0",
    "echarts": "^5.4.2",
    "echarts-for-react": "^3.0.2",
    "moment": "^2.29.4",
    "react": "^16.2.0",
    "react-codemirror2": "^7.2.1",
    "react-dom": "^16.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "5.0.1",
    "recharts": "^2.7.1",
    "web-vitals": "^2.1.4"
   ......

暂时解决：取消scroll={{ x: 'max-content' }}属性错误消失，但是滚动非常需要，目前只能凑合用了

我也碰到过，暂时用style={{marginBottom:'20px',overflowX:"auto",whiteSpace: 'nowrap'}} 可以实现滚动

[Jokasxy]

From Webpack docs, I've found a way to suppress only this message.

// ...
devServer: {
	client: {
		overlay: {
			errors: true,
			runtimeErrors: (error) => {
				if (error.message === 'ResizeObserver loop completed with undelivered notifications.') {
					return false;
				}
				return true;
			},
			warnings: false,
		},
	}
}

[rickvian]

if anyone catch this issue logged by sentry:
https://sentry.io/answers/react-resizeobserver-loop-completed-with-undelivered-notifications/

[jquintozamora]

I have the same issue while using Cascader component.

It happens when I click on the 2nd level of the tree.

ResizeObserver loop completed with undelivered notifications.

[souvik1000]

Used Ant-d Version: 4.24.16

I'm facing the same issue when,
I'm using the ant-d table with the props scroll={{ x: '720px', y: 'calc(100vh - 282px)' }}.

But when I removed x: '720px' from the scroll object, problem got fixed.

I think, I have used as per the documentation only. But it was started throwing Error as ResizeObserver loop completed with undelivered notifications. Please look into this issue.

[Note: This issue is also coming when table columns are changing on toggle]