Error using @ant-design/icons with TypeScript

lfpkkk commented 4 years ago

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 commented 4 years ago

Same on me

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

lfpkkk commented 4 years ago

@chenshuai2144 @afc163 could you guys help me on this issue? have been struggling for weeks. I installed @types/react@16.9.49 and @types/react-dom@16.9.8 but doesn't work.

lfpkkk commented 4 years ago

@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 commented 3 years ago

@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 commented 3 years ago

Same issue. Any update on this?

jiyarong commented 3 years ago

same here

Clarkkkk commented 3 years ago

It may have something to do with the versions of @types/react and @types/react-dom. It works for me with @types/react@16.9.34 and @types/react-dom@16.9.6

neonick commented 3 years ago

Doesn't work with

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

sudarshan070 commented 2 years ago

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

demigodliu commented 1 year ago

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

eminoda commented 1 year ago

https://github.com/ant-design/ant-design-icons/issues/483#issuecomment-1337294734

Pankajsyal1 commented 1 year ago

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

PWbio commented 1 year ago

"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 commented 10 months ago

I have already upgrade versions but still get error

Check out my comment for details; screenshots https://github.com/ant-design/ant-design-icons/issues/483#issuecomment-1779061345

sohail-amini commented 6 months ago

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

datawookie commented 4 months ago

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 commented 1 month ago

See https://github.com/ant-design/ant-design/issues/47886#issuecomment-1998979134

ant-design / ant-design-icons

Error using @ant-design/icons with TypeScript #354

package.json