Typescript-Definition Bug: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'

Shamshiel commented 6 years ago

Describe the problem

Building my Angular 5 project with FontAwesome 5 with the npm package "@fortawesome/fontawesome" version "1.2.0-6" throws following error:

Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'
Type 'IconDefinition' is not assignable to type 'IconPack'.
Index signature is missing in type 'IconDefinition'.

What did you expect?

With the npm package "@fortawesome/fontawesome" version "1.2.0-2" my project didn't throw this error. My web application built with no problems.

What version and implementation are you using?

My implementation looks like this:

import * as fontawesome from '@fortawesome/fontawesome';
import { faQuestionCircle } from '@fortawesome/fontawesome-free-solid/faQuestionCircle';
import { faLock } from '@fortawesome/fontawesome-free-solid/faLock';
import { faTimes } from '@fortawesome/fontawesome-free-solid/faTimes';
import { faSpinner } from '@fortawesome/fontawesome-free-solid/faSpinner';
import { faExclamationCircle } from '@fortawesome/fontawesome-free-solid/faExclamationCircle';
import { faAddressCard } from '@fortawesome/fontawesome-free-regular/faAddressCard';

fontawesome.library.add(faQuestionCircle, faLock, faTimes, faSpinner, faExclamationCircle, faAddressCard);

Because of reasons unknown to me the add method doesn't accept the IconDefinitions anymore.

Reproducible test case

Tried to replicate the problem in a StackBlitz but I can't add the npm version 1.2.0-6 to the dependencies.

Using a new Angular CLI template with the "@fortawesome/fontawesome" npm version 1.2.0-6 immediately shows the error in the editor (Visual Studio Code).

grafik

Bug report checklist

[X] I have filled out as much of the above information as I can
[ ] I have included a test case because my odds go way up that the team can fix this when I do
[X] I have searched for existing issues and to the best of my knowledge this is not a duplicate

syuilo commented 6 years ago

I have the same issue. Any updates on this?

[ts]
型 'typeof "c:/Users/syuilo/projects/misskey/node_modules/@fortawesome/fontawesome-free-regular/index"' の引数を型 'IconDefinitionOrPack' のパラメーターに割り当てることはできません。
  型 'typeof "c:/Users/syuilo/projects/misskey/node_modules/@fortawesome/fontawesome-free-regular/index"' を型 'IconPack' に割り当てることはできません。
    プロパティ 'prefix' はインデックス シグネチャと互換性がありません。
      型 'IconPrefix' を型 'IconDefinition' に割り当てることはできません。
        型 '"fas"' を型 'IconDefinition' に割り当てることはできません。

tagliala commented 6 years ago

@mlwilkerson could you please take a look here?

veliko commented 6 years ago

@tagliala take a look where ? I think you forgot to paste a link. I can also report the exact same issue.

tagliala commented 6 years ago

@veliko here = at this issue :)

mlwilkerson commented 6 years ago

@Shamshiel It looks like you have some package version mismatching going on here. That seems evident because:

(a) you're using a prerelease version, (at least for @fortawesome/fontawesome, version 1.2.0-6). The hyphenated version number is the clue there. That indicates that it's a prerelease of our next version (part of the forthcoming Font Awesome 5.1)

and

(b) you're using package names from the current stable release (but import styles from our prerelease). In 5.1, toward which those prerelease packages are headed, we use different package names and import styles that are more TypeScript and tree-shaking friendly.

(I can't tell from what you reported, which version of @fortawesome/fontawesome-free-solid you're using, but that detail could be very significant for determining exactly why this is breaking. My guess is that you're using 5.1.0-something, one of the old prereleases before we changed the package name.)

So, I think your problems will clear up if you either go all the way with using our prerelease versions:

make sure all of the relevant packages are using the new package names
make sure you're doing all of the imports the way we do them in the newer versions

Or, go back to using just the stable package versions and the 5.0 ways.

To go with the prerelease path, try this in your package.json:

  "dependencies": {
    ...
    "@fortawesome/fontawesome-svg-core": "prerelease",
    "@fortawesome/free-solid-svg-icons": "prerelease",
    "@fortawesome/free-regular-svg-icons": "prerelease",
    ....
  }

And this in your code:

import { library } from '@fortawesome/fontawesome-svg-core';
import { faQuestionCircle, faLock, faTimes, faSpinner, faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
import { faAddressCard } from '@fortawesome/free-regular-svg-icons';

library.add(faQuestionCircle, faLock, faTimes, faSpinner, faExclamationCircle, faAddressCard);

If you want to stick with the current stable release, try this in your package.json:

  "dependencies": {
    ...
    "@fortawesome/fontawesome": "latest",
    "@fortawesome/fontawesome-free-solid": "latest",
    "@fortawesome/fontawesome-free-regular": "latest",
    ....
  }

and this in your code:

import * as faQuestionCircle from '@fortawesome/fontawesome-free-solid/faQuestionCircle';
import * as faLock from '@fortawesome/fontawesome-free-solid/faLock';
import * as faTimes from '@fortawesome/fontawesome-free-solid/faTimes';
import * as faSpinner from '@fortawesome/fontawesome-free-solid/faSpinner';
import * as faExclamationCircle from '@fortawesome/fontawesome-free-solid/faExclamationCircle';
import * as faAddressCard from '@fortawesome/fontawesome-free-regular/faAddressCard';

fontawesome.library.add(faQuestionCircle, faLock, faTimes, faSpinner, faExclamationCircle, faAddressCard);

We're in the process of getting documentation published for those preleases, and we hope to get a stable release of 5.1 soon.

If your intent is to live on the cutting edge of the prerelease cycle, expect both excitement and a bumpy ride from time to time! We'll be glad for your feedback. There will be breaking changes from one prerelease to another.

We're striving to keep with the semver (semantic versioning) approach with our package version numbers, by the way. So breaking things between pre-releases is expected. Breaking things between patch-level releases on a stable version is not.

ryanlangton commented 6 years ago

What is the stable versions I should be using? I have this same problem. Currently trying:

"@fortawesome/angular-fontawesome": "0.1.0-9", "@fortawesome/fontawesome-pro-light": "5.0.10", "@fortawesome/fontawesome-pro-regular": "5.0.10", "@fortawesome/fontawesome-pro-solid": "5.0.10", "@fortawesome/fontawesome-svg-core": "1.2.0-11", "@fortawesome/free-brands-svg-icons": "5.1.0-8", "@fortawesome/free-regular-svg-icons": "5.1.0-8", "@fortawesome/free-solid-svg-icons": "5.1.0-8",

mlwilkerson commented 6 years ago

Well, we don't really have a stable release of @fortawesome/angular-fontawesome just yet. It has been in developing that component that we've driven changes into the core libraries and such. So the most complete and usable @fortawesome/angular-fontawesome is the most recent one tagged as prerelease. (It's also tagged latest, since we haven't really done a stable release of it yet). That most recent version is 0.1.0-9.

So, if that's what is driving your versioning constraints—that you want to use the Angular component—then you'll have to fully commit to living on the edge for now and use the prerelease packages consistently all the way through.

"@fortawesome/angular-fontawesome": "0.1.0-9", "@fortawesome/fontawesome-svg-core": "1.2.0-11", "@fortawesome/free-brands-svg-icons": "5.1.0-8", "@fortawesome/free-regular-svg-icons": "5.1.0-8", "@fortawesome/free-solid-svg-icons": "5.1.0-8", "@fortawesome/pro-regular-svg-icons": "5.1.0-8", "@fortawesome/pro-solid-svg-icons": "5.1.0-8", "@fortawesome/pro-light-svg-icons": "5.1.0-8",

Shamshiel commented 6 years ago

@mlwilkerson Thank you for the detailed answer! I wasn't aware that the name of the packages changed.

As you said I'm currently using this version: "@fortawesome/fontawesome-free-solid": "^5.1.0-3"

matpag commented 6 years ago

I had the same error moving from 5.1.0 to 5.2.0. At the end the problem was in the package-lock.json, where simply updating fortawesome to 5.2.0 in package.json and executing npm i didn't update @fortawesome/fontawesome-common-types peer dependency.

I had to manually update it in package-lock.json from 0.2.0 to 0.2.2 and install again, now everything is fine.

john-md86 commented 6 years ago

@mlwilkerson I'm using FA for Angular, and when using ng serves, error always appears the following error:

ERROR in src/app/share/share.module.ts(75,3): error TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type'IconDefinitionOrPack'.
  Type 'IconDefinition' is not assignable to type 'IconPack'.
    Index signature is missing in type 'IconDefinition'.

When I try to generate a production version, the same error occurred. I used the latest tip, and now it just does not get out of the 92% chunk asset optimization UglifyJSPlugin.

john-md86 commented 6 years ago

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';
import {
  faFacebookSquare,
  faInstagram,
  faTwitter,
  faYoutube,
  faLinkedin,
  faWhatsapp
} from '@fortawesome/free-brands-svg-icons';

import {
  faPlus,
  faTrash,
  faTags,
  faSearch,
  faTimes,
  faUserPlus,
  faUsers,
  faUser,
  faSignOutAlt,
  faArrowLeft,
  faFileMedical,
  faFileSignature,
  faCopy,
  faUserLock,
  faUserCircle,
  faClock,
  faGlobe,
  faAt
} from '@fortawesome/free-solid-svg-icons';

library.add(
  faPlus,
  faTrash,
  faTags,
  faSearch,
  faTimes,
  faUserPlus,
  faUsers,
  faUser,
  faSignOutAlt,
  faArrowLeft,
  faFileMedical,
  faFileSignature,
  faCopy,
  faUserCircle,
  faUserLock,
  faClock,
  faFacebookSquare,
  faInstagram,
  faTwitter,
  faYoutube,
  faLinkedin,
  faGlobe,
  faWhatsapp,
  faAt
);

john-md86 commented 6 years ago

finally generates a prod build, but it took almost five minutes to process something that did not take longer than one before. 😄

Date: 2018-08-25T02:56:09.854Z
Hash: acf51dbf4e4d4fca2589
Time: 480341ms
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.d00979cc24705347f5fe.css (styles) 190 kB [initial] [rendered]
chunk {2} polyfills.7a0e6866a34e280f48e7.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.7861d165caaad3b7138e.js (main) 1 MB [initial] [rendered]

picheli20 commented 5 years ago

My problem was only @fortawesome/fontawesome-svg-core, simply running npm i @fortawesome/fontawesome-svg-core --save solved my issue

simon04 commented 5 years ago

I solved it by switching from @fortawesome/fontawesome to @fortawesome/fontawesome-svg-core and following the how-to-use w.r.t. dom.watch:

   "dependencies": {
-    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-svg-core": "^1.2.7",
     "@fortawesome/free-solid-svg-icons": "^5.4.2",

PeterKottas commented 5 years ago

Still struggling with this over here.

I use

"@fortawesome/fontawesome-free-brands": "5.0.13",
"@fortawesome/fontawesome-pro-light": "5.0.13",
"@fortawesome/fontawesome-pro-solid": "5.0.13",
"@fortawesome/fontawesome-svg-core": "1.2.8",
"@fortawesome/react-fontawesome": "0.1.3",

And when doing

import * as faFacebookF from '@fortawesome/fontawesome-free-brands/faFacebookF';
or
import { faFacebookF } from '@fortawesome/fontawesome-free-brands';
...
<FontAwesomeIcon icon={faFacebookF} />
...

I get

TS2322: Type 'IconDefinition' is not assignable to type 'IconProp'.
Type 'IconDefinition' is not assignable to type '[IconPrefix, IconName]'.

Similar problem occurs when trying to add to library.

Any ideas?

PeterKottas commented 5 years ago

Ok I think I see the problem, apparently fontawesome-pro-solid relies on

  "dependencies": {
    "@fortawesome/fontawesome-common-types": "^0.1.7"
  },

While the rest of the modules (like fontawesome-svg-core) has

  "dependencies": {
    "@fortawesome/fontawesome-common-types": "^0.2.8"
  },

As a result, I get all these errors.

I fixed this by adding

{
  "compilerOptions": {
    "paths": {
      "@fortawesome/fontawesome-common-types": [
        "./node_modules/@fortawesome/fontawesome-common-types/index"
      ]
    }
  }
}

Into my tsconfig.

Imho there are 2 ways to fix this. Either update the version of common types in all packages to match latest (or expected). Or make this a peer dep. I personally prefer peer but this would obviously be a breaking change. Guys hope you don't mind me tagging you in this @mlwilkerson @veliko

alex88 commented 5 years ago

Same issue here with

"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-brands-svg-icons": "^5.1.1",
"@fortawesome/free-solid-svg-icons": "^5.1.1",
"@fortawesome/pro-light-svg-icons": "^5.1.1",
"@fortawesome/pro-regular-svg-icons": "^5.1.1",
"@fortawesome/pro-solid-svg-icons": "^5.1.1",

import { library } from '@fortawesome/fontawesome-svg-core'
import {
  faCircle as fasCircle,
  faChevronLeft as fasChevronLeft,
  faChevronRight as fasChevronRight,
  faChevronDown as fasChevronDown,
  faChevronUp as fasChevronUp,
  faCheckCircle as fasCheckCircle,
  faExclamationTriangle as fasExclamationTriangle
} from '@fortawesome/free-solid-svg-icons';
library.add(fasCircle, fasChevronLeft, fasChevronRight, fasChevronDown, fasChevronUp, fasCheckCircle, fasExclamationTriangle);

import {
  faCalendar as falCalendar,
  faEnvelope as falEnvelope,
  faHospital as falHospital,
  faUserMd as falUserMd
} from '@fortawesome/pro-light-svg-icons';
library.add(falCalendar, falEnvelope, falHospital, falUserMd);

import {
  faCircle as farCircle
} from '@fortawesome/pro-regular-svg-icons';
library.add(farCircle);

isue happends only with the pro packages, not the free ones

robertmclaws commented 5 years ago

So, to build on @picheli20's solution, the way to fix this is to use npm i <packagename> --save on ALL of your FontAwesome packages when you update. That causes package-lock.json to recalculate the dependencies and update them to use the latest fontawesome-common-types package.

FernandoBoza commented 5 years ago

@alex88

isue happends only with the pro packages, not the free ones

any update or fix for the pro packages ?

PunkHaz4rd commented 5 years ago

Still waiting

jordanboston commented 5 years ago

Maybe @picheli20's solution should be noted in the docs. This worked for me just fine, and it was not in relation to the Pro packages, only the brand ones. Seems like any of them that get installed later could potentially cause this issue.

dm-CaT commented 5 years ago

I got the issue fixed with forcing install of "@fortawesome/fontawesome-common-types". npm install @fortawesome/fontawesome-common-types --save

This works with angular 8.2. My resulting package.json fontawesome records:

    "@fortawesome/angular-fontawesome": "^0.4.0",
    "@fortawesome/fontawesome-common-types": "^0.2.21",
    "@fortawesome/fontawesome-svg-core": "^1.2.21",
    "@fortawesome/free-regular-svg-icons": "^5.4.1",
    "@fortawesome/free-solid-svg-icons": "^5.4.1",

AmirSavand commented 4 years ago

Shouldn't it be npm install @fortawesome/fontawesome-common-types --save-dev? Instead of --save?

tagliala commented 4 years ago

@AmirSavand I think it depends on your technology stack and how you are building assets.

In my webpack-based approach (via Rails' webpacker), in example, it is fine to use --save-dev

chris-putnam commented 4 years ago

I was running into this after adding @fortawesome/fontawesome-free-brands - after messing around for a bit I finally saw the message that that package is depreciated and should now use @fortawesome/free-brands-svg-icons

lxanth commented 4 years ago

Have the same issue with Angular 9 and the brand icons. The fix as suggested by @dm-CaT to add the @fortawesome/fontawesome-common-types worked for me too!

thdk commented 4 years ago

UPDATE: The @fortawesome/fontawesome-free-brands is deprecated, I had to use @fortawesome/free-brands-svg-icons instead.

I'm having this with @fortawesome/fontawesome-free-brands

From my package-lock.json I see that all the other icon packages require version 0.2.8 of fontawesome-common-types while font-awesome-free-brands requires 0.1.7.

See a snippet from my package-lock.json

"@fortawesome/fontawesome-common-types": {
      "version": "0.2.28",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
    },
    "@fortawesome/fontawesome-free-brands": {
      "version": "5.0.13",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz",
      "integrity": "sha512-xC/sEPpfcJPvUbud2GyscLCLQlE2DVBYaTHVwuyVGliYBdYejSEYMINU8FN5A0xhO68yCbpCfMlBv6Gqby+jww==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.1.7"
      },
      "dependencies": {
        "@fortawesome/fontawesome-common-types": {
          "version": "0.1.7",
          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
          "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
        }
      }
    },
    "@fortawesome/fontawesome-svg-core": {
      "version": "1.2.28",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.2.28"
      }
    },
    "@fortawesome/free-solid-svg-icons": {
      "version": "5.13.0",
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.2.28"
      }
    },

Can we bump that dependency in font-awesome-free-brands? Or is there a reason that it's falling behind?

Disane87 commented 4 years ago

UPDATE: The @fortawesome/fontawesome-free-brands is deprecated, I had to use @fortawesome/free-brands-svg-icons instead.

I'm having this with @fortawesome/fontawesome-free-brands

From my package-lock.json I see that all the other icon packages require version 0.2.8 of fontawesome-common-types while font-awesome-free-brands requires 0.1.7.

See a snippet from my package-lock.json

"@fortawesome/fontawesome-common-types": {
      "version": "0.2.28",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz",
      "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg=="
    },
    "@fortawesome/fontawesome-free-brands": {
      "version": "5.0.13",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-brands/-/fontawesome-free-brands-5.0.13.tgz",
      "integrity": "sha512-xC/sEPpfcJPvUbud2GyscLCLQlE2DVBYaTHVwuyVGliYBdYejSEYMINU8FN5A0xhO68yCbpCfMlBv6Gqby+jww==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.1.7"
      },
      "dependencies": {
        "@fortawesome/fontawesome-common-types": {
          "version": "0.1.7",
          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
          "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
        }
      }
    },
    "@fortawesome/fontawesome-svg-core": {
      "version": "1.2.28",
      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz",
      "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.2.28"
      }
    },
    "@fortawesome/free-solid-svg-icons": {
      "version": "5.13.0",
      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz",
      "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==",
      "requires": {
        "@fortawesome/fontawesome-common-types": "^0.2.28"
      }
    },

Can we bump that dependency in font-awesome-free-brands? Or is there a reason that it's falling behind?

I guess this is because there are not many brands to be added like icons in the other sets

joshverd commented 4 years ago

Deleting node_modules and package-lock.json, then running npm i @fortawesome/fontawesome-svg-core --save solved it for me.

FortAwesome / Font-Awesome