Vue 3 TS2322 Error: not assignable to type: ComponentInternalInstance

[pingustar]

Describe the bug
On development server the icon works (without HMR though) but when building the project I get this TypeScript error:

error TS2322: Type '{ icon: string; }' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: FontAwesomeIconProps; $attrs: Data; $refs: Data; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; } & ... 5 more ... & Record<...>'. Type '{ icon: string; }' is missing the following properties from type '{ $: ComponentInternalInstance; $data: {}; $props: FontAwesomeIconProps; $attrs: Data; $refs: Data; $slots: Readonly<InternalSlots>; ... 7 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }': $, $data, $props, $attrs, and 10 more.

Versions

• "@fortawesome/vue-fontawesome": "^3.0.0-3",
• "vue": "^3.0.7",
• "typescript": "^4.2.3",
• "vite": "^2.1.0",

Is there at least a way to ignore the error since the icons do show up on the dev server?

[kad-tijhuo]

We are getting the same error when using vitejs with vue-ts template. It uses vue-tsc to do the checking and it fails with that error. At the moment I'm skipping the vue-tsc when doing a build because of that error but would really like to enable it again.

[robmadole]

We are open to PRs to fix this. But we don't use TS so this is pretty low on our priority list.

[pingustar]

We are open to PRs to fix this. But we don't use TS so this is pretty low on our priority list.

That's really a bummer... for multiple reasons:

1. I own multiple FA pro licenses and am more than happy to pay for your great work - but this is a deal breaker for me.

2. With TypeScripts success and rapidly growing user base it feels like you might be missing out and betting on the wrong horse.

[robmadole]

If you can provide a reproducible test case we'll take a look. Because that's always our challenge with the TS issues. It's not that we don't want to fix them but we don't even know where to start.

[pingustar]

@robmadole here you go: https://github.com/pingustar/vite-vue-fontawesome

Steps to reproduce

Clone repo and run
npm install

then build the project with
npm run build

-> build fails with error:

[kad-tijhuo]

I expect index.d.ts should export the components using the DefineComponent type and not the ComponentPublicInstance type since you're using defineComponent to actually define the components, not the options api.

When I change declare const FontAwesomeIcon: ComponentPublicInstance<FontAwesomeIconProps> to declare const FontAwesomeIcon: DefineComponent<FontAwesomeIconProps> locally and run vue-tsc again the errors are gone.

[kad-tijhuo]

I'll take a look this weekend and see if I can submit a PR. We're running into #250 and #295 and both look like pretty easy fixes.

[otijhuis]

I looked into the typing issue but don't know how to test it properly. I don't get the error after changing index.d.ts and matching the vue version to the one in my test app. Using the current peer dependency and vue version doesn't seem to work. I'm not used to creating libraries and I don't want to break anything by changing versions when it's not needed.

Most of my time was spent adding reactivity support so I didn't spend too much time on this issue.

[mivui]

fix
https://github.com/FortAwesome/vue-fontawesome/blob/3.x/index.d.ts#L33-L35

import { DefineComponent } from 'vue'

declare const FontAwesomeIcon: DefineComponent<FontAwesomeIconProps>
declare const FontAwesomeLayers: DefineComponent<FontAwesomeLayersProps>
declare const FontAwesomeLayersText: DefineComponent<FontAwesomeLayersTextProps>

[sasknot]

This worked for me:

import { DefineComponent } from 'vue'
import { FontAwesomeIcon, FontAwesomeIconProps } from '@fortawesome/vue-fontawesome'

...

app.component('fa-icon', FontAwesomeIcon as unknown as DefineComponent<FontAwesomeIconProps>)

If you don't want to write the lib files like @uinio described before.

[exreplay]

To have typings for global components, the following worked for me:

// components.d.ts

import { DefineComponent } from 'vue';
import { FontAwesomeIconProps } from '@fortawesome/vue-fontawesome';

declare module 'vue' {
  export interface GlobalComponents {
    FontAwesomeIcon: DefineComponent<Partial<FontAwesomeIconProps>>;
  }
}

export {};

I'm using vite with the volar extension in vscode.

[Giwayume]

When specifying the TS loader for webpack configuration, you can turn off this error.

{
    test: /\.ts$|\.tsx$/,
    exclude: /(node_modules|dist)/,
    loader: 'ts-loader',
    options: {
        appendTsSuffixTo: [/\.vue$/],
        ignoreDiagnostics: [2322]
    }
},