Skip to content
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

Open
2 of 3 tasks
Shamshiel opened this issue Mar 12, 2018 · 29 comments
Assignees

Comments

@Shamshiel
Copy link

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

  • 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
  • I have searched for existing issues and to the best of my knowledge this is not a duplicate
@syuilo
Copy link

syuilo commented Mar 30, 2018

I have the same issue.
Any updates on this?

image

[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
Copy link
Member

tagliala commented Apr 6, 2018

@mlwilkerson could you please take a look here?

@veliko
Copy link

veliko commented Apr 13, 2018

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

@tagliala
Copy link
Member

@veliko
here = at this issue :)

@mlwilkerson
Copy link
Member

@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
Copy link

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
Copy link
Member

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
Copy link
Author

@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
Copy link

matpag commented Aug 22, 2018

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
Copy link

@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
Copy link

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
Copy link

john-md86 commented Aug 25, 2018

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
Copy link

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

@simon04
Copy link

simon04 commented Nov 1, 2018

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
Copy link

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
Copy link

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
Copy link

alex88 commented Nov 23, 2018

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
Copy link

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
Copy link

FernandoBoza commented Mar 1, 2019

@alex88

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

any update or fix for the pro packages ?

@PunkHaz4rd
Copy link

Still waiting

@jordanboston
Copy link

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
Copy link

dm-CaT commented Aug 7, 2019

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
Copy link

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

@tagliala
Copy link
Member

tagliala commented Oct 2, 2019

@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
Copy link

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
Copy link

lxanth commented Apr 9, 2020

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
Copy link

thdk commented Jun 4, 2020

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
Copy link

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
Copy link

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

bennorth added a commit to pytchlang/pytch-webapp that referenced this issue Jul 7, 2021
Upgrade other font-awesome packages.  Explicitly install common-types
package to fix compilation errors, as per

    FortAwesome/Font-Awesome#12575 (comment)
lolipopshock added a commit to Layout-Parser/platform that referenced this issue Feb 15, 2022
lolipopshock added a commit to Layout-Parser/platform that referenced this issue Mar 2, 2022
undergroundwires added a commit to undergroundwires/privacy.sexy that referenced this issue Sep 22, 2022
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.
LarrMarburger pushed a commit to LarrMarburger/privacy.sexy that referenced this issue Nov 16, 2023
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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests