Tencent / Tencent/tdesign-react

[Loading] 使用 Api 的方式调起 loading 动画指定 dom,报错:Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

Open
#3,360 2 comments 0 reactions 0 assignees View on GitHub

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)
}
期望结果

不报错

实际结果

Image

框架版本
{
  "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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.