(Pro, Kits): @ts-ignore & Type IconDefinition is not assignable to type IconProp

NabilNaou commented 9 months ago

Describe the problem

When using FA Pro, and in particular kits with explicit reference, the import statement will not work unless you add // @ts-ignore. It complains that it cannot find the module.

import { placeholder } from '@awesome.me/kit-CODE/icons/kit/custom';

I have tried re-installing multiple times. The only fix that works is adding a @ts-ignore for the import statement. The error in the HTML can be ignored as it still builds regardless.

Note that the free FA works fine.

What did you expect?

The import to work without a ts ignore The HTML to not throw the error; Type IconDefinition is not assignable to type IconProp

Reproducible test case

Import from a kit using Explicit Reference. Example:

import { faPlaceholder } from '@awesome.me/kit-CODE/icons/kit/custom';

faPlaceholder = faPlaceholder ;

<fa-icon [icon]="faPlaceholder">

The import should complain about not finding the path unless ts ignored, and the html should complain about IconDefinition not being assignable to iconprop.

I have checked my common types, packages, re-installed multiple times, etc. Im quite convinced my installation of FA pro itself is correct.

NabilNaou commented 9 months ago

Another thing that im unsure about

modules/kit/custom.d.ts throws this error when opened. Using the earlier describes ts ignore etc it does not influence my build. However, i thought this might be related / important to know. Common types is downloaded and not duplicated.

devoto13 commented 9 months ago

@robmadole Will you be able to look into this?

@NabilNaou If you can provide a minimal repro, I can also dig into it. I unfortunately don't have access to Kits myself now, so will need a problematic kit to investigate. You can generate one (1-2 dummy/custom icons should be sufficient) and share it as a ZIP. Nevermind, got it sorted out!

robmadole commented 9 months ago

@NabilNaou this is a bug. I'm working on a fix now.

robmadole commented 9 months ago

@devoto13 If you give me your email address in our Slack channel I'll give you a contributor (comped) account if it's useful.

NabilNaou commented 9 months ago

@NabilNaou this is a bug. I'm working on a fix now.

Awesome thanks! No rush but I was wondering if you have an ETA? I'm hoping to implement this in a big project and it'd be a pain to go back later and fix all the ignores. Again thanks for the quick reply!

robmadole commented 9 months ago

@NabilNaou I don't have an ETA yet on this.

prodot-mj commented 4 months ago

@robmadole Any update?

robmadole commented 3 months ago

We haven't forgotten. Our engineering team is currently working a bug-fix 2-week sprint and this issue is high on the list to fix.

devoto13 commented 2 months ago

The issue has been fixed.

Note that to get the fix for an existing kit package, you'll need to regenerate the NPM package (by e.g. adding a new icon to the Kit). Then update the package in your project to the latest version and the type errors should be gone.

$ npm update '@awesome.me/kit-abc'
$ yarn upgrade '@awesome.me/kit-abc@latest'

FortAwesome / angular-fontawesome