FontAweSome, why? Type '"acquisitions-incorporated"' is not assignable to type 'IconName'

Question

I got this error for all FontAweSome icon usage, why?

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faStar } from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faStar}></FontAwesomeIcon>

Type error: Type 'IconDefinition' is not assignable to type 'IconProp'.
  Type 'IconDefinition' is not assignable to type 'IconLookup'.
    Types of property 'iconName' are incompatible.
      Type 'import("/Users/kukodajanos/Workspace/Dating/Vercel/node_modules/@fortawesome/fontawesome-common-types/index").IconName' is not assignable to type 'import("/Users/kukodajanos/Workspace/Dating/Vercel/node_modules/@fortawesome/fontawesome-svg-core/node_modules/@fortawesome/fontawesome-common-types/index").IconName'.
        Type '"acquisitions-incorporated"' is not assignable to type 'IconName'.

  140 |                         onClick={() => handleRating(o.id, o.rating, i)}
  141 |                       >
> 142 |                         <FontAwesomeIcon icon={faStar}></FontAwesomeIcon>
      |                                          ^
  143 |                       </div>
  144 |                     ))}
  145 |                   </div>

I imported package from an other working project, htere no issue is raised:

{
  "name": "dating",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.57",
    "@material-ui/pickers": "^3.2.10",
    "@next/bundle-analyzer": "^11.1.2",
    "@reduxjs/toolkit": "^1.6.1",
    "@styled-system/css": "^5.1.5",
    "@swan-bitcoin/xpub-lib": "^0.1.0",
    "@types/accounting": "^0.4.1",
    "@types/axios": "^0.14.0",
    "@types/cors": "^2.8.10",
    "@types/crypto-js": "^4.0.1",
    "@types/date-fns": "^2.6.0",
    "@types/material-ui": "^0.21.8",
    "@types/next": "^9.0.0",
    "@types/node": "^15.0.2",
    "@types/qrcode.react": "^1.0.1",
    "@types/query-string": "^6.3.0",
    "@types/react-copy-to-clipboard": "^5.0.0",
    "@types/react-csv": "^1.1.1",
    "@types/react-date-range": "^1.1.8",
    "@types/react-ga": "^2.3.0",
    "@types/react-qr-reader": "^2.1.3",
    "accounting": "^0.4.1",
    "accounting-js": "^1.1.1",
    "axios": "^0.21.1",
    "bip32": "^2.0.6",
    "bootstrap": "5.1.0",
    "cors": "^2.8.5",
    "cross-env": "^7.0.3",
    "crypto-js": "^4.0.0",
    "date-fns": "^2.25.0",
    "detect-browser-language": "^0.0.2",
    "heic-convert": "^1.2.4",
    "konva": "^7.2.5",
    "material-ui": "^0.20.2",
    "next": "10.0.5",
    "next-redux-wrapper": "^7.0.4",
    "prettier": "^2.2.1",
    "qrcode.react": "^1.0.1",
    "query-string": "^6.13.8",
    "react": "17.0.1",
    "react-bitcoin-qr": "^0.0.3",
    "react-bootstrap": "^2.0.0-beta.5",
    "react-copy-to-clipboard": "^5.0.3",
    "react-country-region-selector": "^3.0.2",
    "react-countup": "^5.2.0",
    "react-csv": "^2.0.3",
    "react-date-range": "^1.4.0",
    "react-dom": "17.0.1",
    "react-facebook-login": "^4.1.1",
    "react-ga": "^3.3.0",
    "react-google-login": "^5.2.2",
    "react-icons": "^4.2.0",
    "react-konva": "^17.0.2-0",
    "react-leaf-carousel": "^2.0.3",
    "react-messenger-customer-chat": "^0.8.0",
    "react-meta-tags": "^1.0.1",
    "react-multi-carousel": "^2.6.1",
    "react-parallax": "^3.3.0",
    "react-player": "^2.9.0",
    "react-qr-reader": "^2.2.1",
    "react-redux": "^7.2.5",
    "react-responsive-carousel": "^3.2.11",
    "react-visibility-sensor": "^5.1.1",
    "redux": "^4.1.1",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "sass": "^1.42.1",
    "sharp": "^0.28.3",
    "styled-components": "^5.3.0",
    "styled-icons": "^10.38.0",
    "styled-system": "^5.1.5",
    "styled-system-html": "^3.0.0",
    "use-image": "^1.0.8",
    "uuidv4": "^6.2.6"
  },
  "devDependencies": {
    "@types/react": "^17.0.33",
    "eslint": "7",
    "eslint-config-next": "12.0.1",
    "typescript": "^4.4.4"
  }
}

Answer 1

I got the same issue Its a package version realted issue. just removed all the font-awesome packages from package.json and reinstal.

Before

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"font-awesome": "^4.7.0",

After

"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
"font-awesome": "^4.7.0",

Its working cool.