ant-design / ant-design/pro-components

🐛[BUG] ProTable Ellipsis: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Open
#8,053 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

```
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:8467:26)
at commitDeletionEffectsOnFiber (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17506:21)
at recursivelyTraverseDeletionEffects (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17482:13)
at commitDeletionEffectsOnFiber (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17606:15)
at commitDeletionEffects (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17473:13)
at recursivelyTraverseMutationEffects (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17670:17)
at commitMutationEffectsOnFiber (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17892:15)
at recursivelyTraverseMutationEffects (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17681:15)
at commitMutationEffectsOnFiber (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17695:15)
at recursivelyTraverseMutationEffects (http://localhost:2048/node_modules/.vite/deps/chunk-QPHASEO2.js?v=3a228509:17681:15)
```
下面这个错误栈表明是 Ellipsis 功能报的错
```
console.js:213 The above error occurred in the component:

at Ellipsis (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:92356:9)
at span
at http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:92227:20
at http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:20122:28
at DomWrapper4 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:419:9)
at SingleObserver (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:435:24)
at ResizeObserver2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:524:24)
at http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:20819:34
at Tooltip2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:26299:36)
at http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:27017:20
at EllipsisTooltip (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:92472:9)
at DomWrapper4 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:419:9)
at SingleObserver (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:435:24)
at ResizeObserver2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:524:24)
at http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:92573:20
at Text (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:92985:9)
at td
at Cell2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77456:5)
at tr
at BodyRow (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77914:5)
at ImmutableComponent2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77236:7)
at tbody
at Body (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:78053:5)
at ImmutableComponent2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77236:7)
at table
at div
at div
at div
at Provider2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77120:22)
at Table (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:79167:31)
at ImmutableComponent2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:77208:37)
at div
at div
at Spin (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:66763:20)
at div
at InternalTable (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:86569:20)
at Table2 (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:86911:39)
at div
at div
at http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:12729:25
at div
at TableRender (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:37253:22)
at ProTable2 (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:37450:28)
at ErrorBoundary2 (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:8628:5)
at ProConfigProvider2 (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:8498:24)
at Container2 (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:34702:34)
at ProviderTableContainer2 (http://localhost:2048/node_modules/.vite/deps/@ant-design_pro-components.js?v=3a228509:37825:52)
// ...
at RenderedRoute (http://localhost:2048/node_modules/.vite/deps/react-router-dom.js?v=3a228509:3543:5)
at Routes (http://localhost:2048/node_modules/.vite/deps/react-router-dom.js?v=3a228509:3978:5)
at default
at QueryClientProvider (http://localhost:2048/node_modules/.vite/deps/@tanstack_react-query.js?v=3a228509:2715:3)
at Router (http://localhost:2048/node_modules/.vite/deps/react-router-dom.js?v=3a228509:3921:15)
at BrowserRouter (http://localhost:2048/node_modules/.vite/deps/react-router-dom.js?v=3a228509:4654:5)
at _ErrorBoundary (http://localhost:2048/node_modules/.vite/deps/@sentry_react.js?v=3a228509:19860:5)
at div
at App (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:18626:20)
at LocaleProvider (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:3129:17)
at SizeContextProvider (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:3740:9)
at MotionWrapper (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:5818:5)
at ProviderChildren (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:5967:9)
at ConfigProvider (http://localhost:2048/node_modules/.vite/deps/chunk-FG5XE72T.js?v=3a228509:6222:31)
at AntdContainer (http://localhost:2048/src/components/AntdContainer.tsx:20:26)

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary2.
```

### 📷 复现步骤

开启 ProTable 列配置的 ellipsis 和 copyable,切到页面有一定几率触发。

### 🏞 期望结果

不报错

### 💻 复现代码

``` tsx
a.name.localeCompare(b.name),
},
// ...
]}
{/* ... */}
/>
```

### © 版本信息

"@ant-design/pro-components": "^2.6.43"
"antd": "^5.12.5"
Chrome Version 120.0.6099.199 (Official Build) (arm64)
MacOS 14.3 Beta (23D5033f)

### 🚑 其他信息

![image](https://github.com/ant-design/pro-components/assets/20217146/37b780ae-4379-4d22-bac8-3e4e31892376)

Contributor guide

Open the contributing guide

Research direction

Start with the provided ProTable snippet using ellipsis and copyable, then inspect the ProTable/Ellipsis path shown in the stack trace and the integration point at src/components/AntdContainer.tsx. Reproduce the intermittent page switch and trace the removeChild failure; done means the same configuration can be switched without the DOMException.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.