Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<[]>'

[mrleblanc101]

Vue version

3.2.47

Link to minimal reproduction

Plugin source: https://github.com/mrleblanc101/vue3-transition-expand/tree/types

Steps to reproduce

I'm following the official documentation to create a custom plugin, but I added TypeScript.
It's a very simple plugin that import a single component.
I extend the component to allow overriding the default value of props from the plugin options.
Here is my plugin code:

import type { App, Plugin } from 'vue';
import TransitionExpand from './components/TransitionExpand.vue';

export interface PluginOptions {
    componentName?: string;
    duration?: number;
}

export default {
    install: (app: App, options: PluginOptions = {}) => {
        app.component(options?.componentName || 'TransitionExpand', {
            extends: TransitionExpand,
            setup: TransitionExpand.setup,
            props: {
                duration: {
                    default: options?.duration,
                },
            },
        });
    },
} as Plugin;

export { TransitionExpand };

Here is my import code in a Nuxt 3 app:

import TransitionExpand from 'vue3-transition-expand';
import 'vue3-transition-expand/dist/style.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(TransitionExpand, {
        duration: 300,
    });
});

What is expected?

The type definition are not infered correctly.

What is actually happening?

No overload matches this call.
Overload 1 of 2, '(plugin: Plugin_2<[{ duration: number; }]>, options_0: { duration: number; }): App', gave the following error.
Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<[{ duration: number; }]>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<[{ duration: number; }]>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App, options_0: { duration: number; }) => any) & { install?: ((app: App, options_0: { duration: number; }) => any) | undefined; }'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App, options_0: { duration: number; }) => any'.
Types of parameters 'app' and 'app' are incompatible.
Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'.
The types of 'config.errorHandler' are incompatible between these types.
Type '((err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...' is not assignable to type '((err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...'.
Type '(err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...' is not assignable to type '(err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null'.
Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'.
Types of property '$' are incompatible.
Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'.
Overload 2 of 2, '(plugin: Plugin_2<{ duration: number; }>, options: { duration: number; }): App', gave the following error.
Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<{ duration: number; }>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<{ duration: number; }>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App, options: { duration: number; }) => any) & { install?: ((app: App, options: { duration: number; }) => any) | undefined; }'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App, options: { duration: number; }) => any'.
Types of parameters 'app' and 'app' are incompatible.
Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'.

System Info

No response

Any additional comments?

No response

[mrleblanc101]

If I remove the options like so:

import TransitionExpand from 'vue3-transition-expand';
import 'vue3-transition-expand/dist/style.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(TransitionExpand);
});

I get a different error:

Argument of type 'Plugin_2<any[]>' is not assignable to parameter of type 'Plugin_2<[]>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type 'Plugin_2<[]>'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '((app: App) => any) & { install?: ((app: App) => any) | undefined; }'.
Type '((app: App, ...options: any[]) => any) & { install?: ((app: App, ...options: any[]) => any) | undefined; }' is not assignable to type '(app: App) => any'.
Types of parameters 'app' and 'app' are incompatible.
Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'.
The types of 'config.errorHandler' are incompatible between these types.
Type '((err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...' is not assignable to type '((err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBa...'.
Type '(err: unknown, instance: import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...' is not assignable to type '(err: unknown, instance: import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBas...'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null'.
Type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...' is not assignable to type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentOptionsBase<any, any, any, any, any...'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...ar...'.
Types of property '$' are incompatible.
Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'.

[mrleblanc101]

I dug into the Vue-core test and I don't see what my issue is.
https://github.com/vuejs/core/blob/main/packages/dts-test/appUse.test-d.ts

[mrleblanc101]

This might be a Nuxt bug 🤔

[mrleblanc101]

Someone suggested trying an earlier version of Vue 3 since 3.2.46/47 brought some TypeSript changes.
I tried 3.2.40 and got a slightly different error than above:

Argument of type '{ install(app: App, options: PluginOptions): void; }' is not assignable to parameter of type 'Plugin_2'.
Type '{ install(app: App, options: PluginOptions): void; }' is not assignable to type '{ install: PluginInstallFunction; }'.
Types of property 'install' are incompatible.
Type '(app: App, options: PluginOptions) => void' is not assignable to type 'PluginInstallFunction'.
Types of parameters 'app' and 'app' are incompatible.
Type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").App' is not assignable to type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").App'.
The types of 'config.errorHandler' are incompatible between these types.
Type '((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => void) | undefined' is not assignable to type '((err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => void) | undefined'.
Type '(err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => void' is not assignable to type '(err: unknown, instance: ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => void'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.
Type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly; $root: ComponentPublicInstance<...> | null; ... 6 more ...; $watch(source: string | Function, cb: Function, options?: WatchOptions<...> | undefined): WatchStopHandle; }'.
Types of property '$' are incompatible.
Property '_nuxtOnBeforeMountCbs' is missing in type 'import("/Users/sleblanc/Github/vue3-transition-expand/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance' but required in type 'import("/Users/sleblanc/Github/mrleblanc101.github.io/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance'.

[mrleblanc101]

This is actually an issue because I was using npm link to test my package and my package was on Vue 3.2.46 while my app was in 3.2.47