Vue 3 TS2322 Error: not assignable to type: ComponentInternalInstance

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?

[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.

[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.