angular-fontawesome: Argument of type 'IconPack' is not assignable to parameter of type 'IconDefinitionOrPack'

I had the problem too, the solution was to add a missing import-statement.

@import "~@fortawesome/fontawesome-free/css/regular.css";
@import "~@fortawesome/fontawesome-free/css/solid.css";
@import "~@fortawesome/fontawesome-free/css/fontawesome.css";
@import "~@fortawesome/fontawesome-free/css/brands.css"; // <- this one was missing

Fixed issue by using IconDefinition

import { library, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
  faTwitter,
  faGithub,
  faDiscord,
  faTelegram,
  faMedium
} from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';

library.add(
  faTwitter as IconDefinition,
  faGithub as IconDefinition,
  faDiscord as IconDefinition,
  faTelegram as IconDefinition,
  faMedium as IconDefinition
);

So the issue seems to be that you ended up having two instances of @fortawesome/fontawesome-common-types of different versions installed.

Can you first try to open your package-lock.json/yarn.lock and search for "@fortawesome/fontawesome-common-types": {? Does it find more than one result? If so try changing @fortawesome/fontawesome-svg-core to ^1.2.12 and running npm install to force it to update and de-duplicate?

Hi developer, I haver another other solution for this problem:

` import { fas } from ‘@fortawesome/free-solid-svg-icons’ import { fab } from ‘@fortawesome/free-brands-svg-icons’ import { far } from ‘@fortawesome/free-regular-svg-icons’ import { library, IconPack } from ‘@fortawesome/fontawesome-svg-core’

library.add( far as IconPack, fas as IconPack, fab as IconPack ) `

Hey @mightykip, Sorry for the late response!

I’ve rasied this problem upstream in https://github.com/FortAwesome/Font-Awesome/issues/16592#issuecomment-1053578571. To resolve it on your side (for now), please change "@fortawesome/fontawesome-svg-core": "^1.3.0" to "@fortawesome/fontawesome-svg-core": "~1.2.36" and npm install.

I hope that my proposal will get accepted and we can finally resolve this type compatibility mess.

I’ve also created https://github.com/FortAwesome/angular-fontawesome/issues/346, which I’m going to look into once I have a response to my proposal.

I couldn’t get it to force the install, so I removed it from packages.json and then readded it. Now all point to ^0.2.15. (While before one was pointing to 0.2.12)

So the better question, is this an NPM issue or a deployment problem from the package?

It’s is a consequence of how FontAwesome packages are structured. Let’s keep this issue open, I’lll think how we can prevent this from happening in the future.

Ok @devoto13 both of those packages are now deprecated. Hopefully that will clean up the mess! Thanks again for helping us with this one.

@devoto13 yes. I’ll be deprecating those. I will also be pinning each of the icon packages (like @fortawesome/free-solid-svg-icons) to use @fortawesome/fontawesome-svg-core at 6.1.0 instead of ^6.1.0. It just doesn’t make sense to let that dependency be out of sync with the exact version of the icon packages.

I think at one point we thought it might be useful to release these things with patch releases outside the normal Font Awesome release process. But that idea hasn’t panned out (we’ve never done that to my knowledge.) So it makes sense to just keep all these version grouped together and all dependencies will match.

faTwitter as IconDefinition

It’s not ideal but this solution did work for now.

Thanks @launchdex !

Managed to reproduce it, investigating.

I had to set the versions fixed to make it work. deleted package-lock and ran npm i again

    "@fortawesome/angular-fontawesome": "0.11.1",
    "@fortawesome/fontawesome-svg-core": "6.2.1",
    "@fortawesome/free-brands-svg-icons": "6.2.1",
    "@fortawesome/free-solid-svg-icons": "6.2.1",

We are implementing @devoto13’s proposal (it’s a good one!) and it will be available in 6.1.0.

Ok apologies! 🤦‍♂

Using Yarn to install packages and noticed after I remove the package-lock.json that yarn has it’s own lock.json file and yes I can see more than 1 @fortawesome/fontawesome-common-types package.

have removed the incorrect package now from the yarn.lock, reinstalled node_modules and is working now 👍