-
Notifications
You must be signed in to change notification settings - Fork 12.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Typescript-Definition Bug: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack' #12575
Comments
I have the same issue.
|
@mlwilkerson could you please take a look here? |
@tagliala take a look where ? I think you forgot to paste a link. I can also report the exact same issue. |
@veliko |
@Shamshiel It looks like you have some package version mismatching going on here. That seems evident because: (a) you're using a 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 So, I think your problems will clear up if you either go all the way with using our prerelease 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
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
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. |
What is the stable versions I should be using? I have this same problem. Currently trying:
|
Well, we don't really have a stable release of 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
|
@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: |
I had the same error moving from 5.1.0 to 5.2.0. I had to manually update it in |
@mlwilkerson I'm using FA for Angular, and when using
When I try to generate a production version, the same error occurred. I used the |
|
finally generates a prod build, but it took almost five minutes to process something that did not take longer than one before. 😄
|
My problem was only |
I solved it by switching from "dependencies": {
- "@fortawesome/fontawesome": "^1.1.8",
+ "@fortawesome/fontawesome-svg-core": "^1.2.7",
"@fortawesome/free-solid-svg-icons": "^5.4.2", |
Still struggling with this over here. I use
And when doing
I get
Similar problem occurs when trying to add to library. Any ideas? |
Ok I think I see the problem, apparently fontawesome-pro-solid relies on
While the rest of the modules (like fontawesome-svg-core) has
As a result, I get all these errors. I fixed this by adding
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 |
Same issue here with
isue happends only with the pro packages, not the free ones |
So, to build on @picheli20's solution, the way to fix this is to use |
any update or fix for the pro packages ? |
Still waiting |
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. |
I got the issue fixed with forcing install of "@fortawesome/fontawesome-common-types". This works with angular 8.2. My resulting package.json fontawesome records:
|
Shouldn't it be |
@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 |
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 |
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! |
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
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 |
Deleting |
Upgrade other font-awesome packages. Explicitly install common-types package to fix compilation errors, as per FortAwesome/Font-Awesome#12575 (comment)
This commit fixes two issues: a. Fix `npm install` not working b. Fix building not working after npm install fix. npm install fails with dependency resolution issue due to Vue CLI as following: ```txt npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: cache-loader@4.1.0 ... ```txt As suggested in Vue issues regenerating packages-lock.json solves the issue, see: vuejs/vue-cli#6793, vuejs/vue-cli#7095. However with the new package-lock.json a Font Awesome dependency issue breaks the builds such as the following: ```txt ERROR in src/presentation/bootstrapping/Modules/IconBootstrapper.ts:17:7 TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'. Type 'IconDefinition' is not assignable to type 'IconPack'. Index signature for type 'string' is missing in type 'IconDefinition'. 15 | public bootstrap(vue: VueConstructor): void { 16 | library.add( > 17 | faGithub, ``` This is solved by adding a patch in `tsconfig.json`. This issue was discussed in FortAwesome/Font-Awesome#12575 where the workaround was recommended.
This commit fixes two issues: a. Fix `npm install` not working b. Fix building not working after npm install fix. npm install fails with dependency resolution issue due to Vue CLI as following: ```txt npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: cache-loader@4.1.0 ... ```txt As suggested in Vue issues regenerating packages-lock.json solves the issue, see: vuejs/vue-cli#6793, vuejs/vue-cli#7095. However with the new package-lock.json a Font Awesome dependency issue breaks the builds such as the following: ```txt ERROR in src/presentation/bootstrapping/Modules/IconBootstrapper.ts:17:7 TS2345: Argument of type 'IconDefinition' is not assignable to parameter of type 'IconDefinitionOrPack'. Type 'IconDefinition' is not assignable to type 'IconPack'. Index signature for type 'string' is missing in type 'IconDefinition'. 15 | public bootstrap(vue: VueConstructor): void { 16 | library.add( > 17 | faGithub, ``` This is solved by adding a patch in `tsconfig.json`. This issue was discussed in FortAwesome/Font-Awesome#12575 where the workaround was recommended.
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:
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:
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).
Bug report checklist
The text was updated successfully, but these errors were encountered: