Tencent / Tencent/tdesign-react
[Loading] 使用 Api 的方式调起 loading 动画指定 dom,报错:Uncaught TypeError: Cannot read properties of null (reading 'appendChild')
Open
Nobody has claimed this yet.
💭 discussion
example
- Dominant language
- TypeScript
- Stars
- 965
- Forks
- 373
- Avg merge
- 3d 6h
- Merged PRs (30d)
- 17
Description
tdesign-react 版本
"tdesign-react": "^1.10.0",
重现链接
No response
重现步骤
const loadInstance = loading({
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
attach: () => document.querySelector('#subApp'),
showOverlay: true,
zIndex: 599,
size: 'small',
text: '加载中...',
style: {
width: '100%',
height: '100%',
backdropFilter: 'blur(4px)',
},
})
const loader = (loadingStatus?: boolean) => {
if (!loadingStatus) {
setTimeout(() => {
loadInstance.hide()
start()
}, 500)
}
console.log('loading:', loadingStatus)
}
期望结果
不报错
实际结果
框架版本
{
"name": "sass-base",
"version": "0.1.0",
"homepage": "/wly-base",
"private": true,
"dependencies": {
"@reduxjs/toolkit": "2.2.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.119",
"@types/nprogress": "^0.2.3",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@types/react-redux": "^7.1.34",
"@types/react-router-dom": "^5.3.3",
"@types/react-transition-group": "^4.4.12",
"@types/webpackbar": "^4.0.6",
"axios": "^1.7.7",
"less-loader": "^6.2.0",
"nprogress": "^0.2.0",
"qiankun": "^2.10.16",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-full-screen": "^1.1.1",
"react-redux": "9.1.2",
"react-router": "^7.0.1",
"react-scripts": "5.0.1",
"react-transition-group": "^4.4.5",
"redux-persist": "6.0.0",
"tdesign-icons-react": "^0.4.2",
"tdesign-react": "^1.10.0",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"webpack": "^5.96.1",
"webpackbar": "^7.0.0"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"build:prod": "cross-env NODE_ENV=production craco build",
"build:test": "cross-env NODE_ENV=test craco build",
"test": "craco test",
"eject": "craco eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"@craco/types": "^7.1.0",
"@eslint/js": "^9.15.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"@typescript-eslint/parser": "^7.0.0",
"craco-less": "^3.0.1",
"cross-env": "^7.0.3",
"eslint": "^8.0.0",
"eslint-config-airbnb-typescript": "^18.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-react": "^7.37.2",
"globals": "^15.12.0",
"less": "^4.2.0",
"prettier": "^3.3.3",
"tailwindcss": "^3.4.15",
"typescript-eslint": "^8.15.0"
}
}
浏览器版本
No response
系统版本
No response
Node版本
node:18
补充说明
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start from the loading API entry point and inspect how the attach callback is used with the provided #subApp selector. Reproduce the snippet against tdesign-react 1.10.0, then verify the loading flow no longer throws when the selected DOM element is unavailable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100