Error using @ant-design/icons with TypeScript

[lfpkkk]

Lately I have problem using icons with @ant-design/icons. It seems like this issue has been there for a while, but only a few people have encountered it.

I tried the solution @lukasluecke suggested in #304, which is to install @types/react and @types/react-dom directly to the project. But it does work for my situation. Any other suggestion on solving

package.json

"dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.29",
    "@fortawesome/free-solid-svg-icons": "^5.13.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@microsoft/sp-core-library": "1.10.0",
    "@microsoft/sp-lodash-subset": "1.10.0",
    "@microsoft/sp-office-ui-fabric-core": "1.10.0",
    "@microsoft/sp-property-pane": "1.10.0",
    "@microsoft/sp-webpart-base": "1.10.0",
    "@pnp/common": "^2.0.6",
    "@pnp/graph": "^2.0.6",
    "@pnp/logging": "^2.0.6",
    "@pnp/odata": "^2.0.6",
    "@pnp/sp": "^2.0.6",
    "@pnp/telemetry-js": "^2.0.0",
    "@reduxjs/toolkit": "^1.4.0",
    "@types/es6-promise": "0.0.33",
    "@types/react": "16.8.8",
    "@types/react-dom": "16.8.3",
    "@types/webpack-env": "1.13.1",
    "antd": "^4.4.1",
    "office-ui-fabric-react": "6.189.2",
    "react": "16.8.5",
    "react-dom": "16.8.5",
    "react-highlight-words": "^0.16.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0"
  },
  "resolutions": {
    "@types/react": "16.8.8"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-3.3": "0.3.5",
    "@microsoft/rush-stack-compiler-3.7": "^0.5.2",
    "@microsoft/sp-build-web": "1.10.0",
    "@microsoft/sp-module-interfaces": "1.10.0",
    "@microsoft/sp-tslint-rules": "1.10.0",
    "@microsoft/sp-webpart-workbench": "1.10.0",
    "@types/chai": "3.4.34",
    "@types/mocha": "2.2.38",
    "@types/react-redux": "^7.1.9",
    "@types/react-router-dom": "^5.1.5",
    "ajv": "~5.2.2",
    "gulp": "^3.9.1"
  }

[linonetwo]

Same on me

Type '{ className: string; }' is missing the following properties from type 'Pick<AntdIconProps

[lfpkkk]

@chenshuai2144 @afc163 could you guys help me on this issue? have been struggling for weeks. I installed @types/[email protected] and @types/[email protected] but doesn't work.

[lfpkkk]

@linonetwo After weeks of research, I finally noticed that @types/react and @types/react-dom are listed under devDependencies in package.json by default, but in my project they were moved under dependencies somehow.
So my final solution to this issue is to move them back to devDependencies, of course with the latest version number, and then reinstall the whole node modules by npm intall.

Hope this is helpful for solving your issue as well.

[antstudio-git]

@lfpkkk it doesn't work as followed your steps. I just use the icon with default props, but it warned.

is there any other ways to fix?

[dexter0201]

Same issue. Any update on this?

[jiyarong]

same here

[Clarkkkk]

It may have something to do with the versions of @types/react and @types/react-dom. It works for me with @types/[email protected] and @types/[email protected]

[neonick]

Doesn't work with

"@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0",

[sudarshan070]

Same issue with
"@types/react": "^16.9.53", "@types/react-dom": "^16.9.8",

[demigodliu]

Same Problem：
"react": "^18.1.0"
"react-dom": "^18.1.0"

[eminoda]

#483 (comment)

[Pankajsyal1]

<CaretRightOutlined rev={""} rotate={isActive ? 90 : 0} />}> add rev property it will fix

[PWbio]

"react": "17.0.2",
"react-dom": "17.0.2",
"@types/react": "17.0.65", // upgrade
"@types/react-dom": "17.0.20", // upgrade
"antd": "^5.9.0",

Upgrade types version works for me

[dizefurkan]

I have already upgrade versions but still get error

Check out my comment for details; screenshots
#483 (comment)

[sohail-amini]

Add these two:
onPointerEnterCapture={undefined} onPointerLeaveCapture={undefined}

[datawookie]

I was getting same error:

src/components/sidebar/sidebar.tsx:342:24 - error TS2739: Type '{}' is missing the following properties from
type 'Pick<AntdIconProps, "type" | "children" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style"
| "summary" | "title" | "pattern" | "value" | "id" | "src" | ... 348 more ... | "twoToneColor">':
onPointerEnterCapture, onPointerLeaveCapture

342           expandIcon={<RightOutlined />}

and the solution from @sohail-amini worked for me!

[wctiger]

See ant-design/ant-design#47886 (comment)