Cryptic type error in vue after install pinia

[Djaler]

Reproduction

https://stackblitz.com/github/Djaler/pinia-types-bug

Steps to reproduce the behavior

1. Open stackblitz link
2. Wait for dependencies install
3. Run npx vue-demi-switch 2 (looks like stackblitz doesn't autorun postinstall)
4. Run npm run typecheck

Expected behavior

No errors

Actual behavior

src/hooks.ts:15:9 - error TS2322: Type 'Route' is not assignable to type '{ path: string; name?: string | null | undefined; hash: string; query: { [x: string]: string | (string | null)[]; }; params: { [x: string]: string; }; fullPath: string; matched: { path: string; regex: { ...; }; ... 8 more ...; props: boolean | ... 2 more ... | { ...; }; }[]; redirectedFrom?: string | undefined; meta...'.
  Types of property 'matched' are incompatible.
    Type 'RouteRecord[]' is not assignable to type '{ path: string; regex: { exec: (string: string) => RegExpExecArray | null; test: (string: string) => boolean; readonly source: string; readonly global: boolean; readonly ignoreCase: boolean; ... 11 more ...; [Symbol.matchAll]: (str: string) => IterableIterator<...>; }; ... 8 more ...; props: boolean | ... 2 more ......'.
      Type 'RouteRecord' is not assignable to type '{ path: string; regex: { exec: (string: string) => RegExpExecArray | null; test: (string: string) => boolean; readonly source: string; readonly global: boolean; readonly ignoreCase: boolean; ... 11 more ...; [Symbol.matchAll]: (str: string) => IterableIterator<...>; }; ... 8 more ...; props: boolean | ... 2 more ......'.
        Types of property 'components' are incompatible.
          Type 'Dictionary<Component>' is not assignable to type '{ [x: string]: VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; }; }'.
            'string' index signatures are incompatible.
              Type 'Component' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; }'.
                Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; }'.
                  Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>' is not assignable to type '{ data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<any>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...; pinia?: { ...; } | undefined; }'.
                    Types of property 'components' are incompatible.
                      Type '{ [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any>; } | undefined' is not assignable to type '{ [x: string]: VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { ...; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefined, createElement: CreateEleme...'.
                        Type '{ [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any>; }' is not assignable to type '{ [x: string]: VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | ... 1 more ... | Prop<...>[]; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; rend...'.
                          'string' index signatures are incompatible.
                            Type 'Component<any, any, any, any> | AsyncComponent<any, any, any, any>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | { ...; } | Prop<...>[]; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefine...'.
                              Type 'ComponentOptions<never, any, any, any, any, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | { ...; } | Prop<...>[]; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefine...'.
                                Type 'ComponentOptions<never, any, any, any, any, DefaultProps>' is not assignable to type '{ data?: any; props?: any; propsData?: object | undefined; computed?: { [x: string]: { get?: (() => any) | undefined; set?: ((value: any) => void) | undefined; cache?: boolean | undefined; } | (() => any); } | undefined; ... 38 more ...; pinia?: { ...; } | undefined; }'.
                                  Types of property 'parent' are incompatible.
                                    Type 'Vue | undefined' is not assignable to type '{ readonly $el: Element; readonly $options: { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<any>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...'.
                                      Type 'Vue' is not assignable to type '{ readonly $el: Element; readonly $options: { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<any>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...'.
                                        The types of '$options.mixins' are incompatible between these types.
                                          Type '(VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, DefaultProps>)[] | undefined' is not assignable to type '(VueConstructor<Vue> | { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...; pinia?: { ...; }...'.
                                            Type '(VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, DefaultProps>)[]' is not assignable to type '(VueConstructor<Vue> | { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...; pinia?: { ...; }...'.
                                              Type 'VueConstructor<Vue> | ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<...>, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...; pinia?: { ...; } ...'.
                                                Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; } | Prop<...>[]; } | undefined; ... 40 more ...; pinia?: { ...; } ...'.

15         route.value = to;

[Djaler]

@posva why you think this is not bug?

[posva]

I didn't say anything 😅 but this seems to be about the router

The hook doesn't look right, especially the ref(vm.proxy.$route) because Vue 2 modifies objects in place, so and the $route is read only. Using a computed(() => vm.$route) or something similar to create a useRoute() should be enough

[Djaler]

I didn't say anything

I think so because you moved it from issues.

Yeah, looks like my useRoute implementation wasn't correct.

In general, this errors happens in such cases:

import { ref } from '@vue/composition-api';
import { AsyncComponent, Component } from 'vue';

export type VueComponent = Component<any, any, any, any> | AsyncComponent<any, any, any, any> | (() => Component);

export interface Foo {
    component: VueComponent;
}

export function useFoo() {
    const foo: Foo = {
        component: {},
    };

    const fooRef = ref(foo);

    const secondFoo: Foo = {
        component: {},
    };
    
    fooRef.value = secondFoo; // Type 'Foo' is not assignable to type '{ component: VueConstructor<Vue> | AsyncComponent<any, any, any, any> | (() => Component<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps>) | { ...; } | { ...; }; }'.
    
    return {
        fooRef,
    }
}

But if I changed ref to shallowRef - error is gone.

[kingyue737]

I meet a similar problem when I store RouteConfig in pinia. Do you know what's wrong?

Type 'RouteConfig[]' is not assignable to type '({ component?: VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined; ... 9 more ...; pathToRegexpOptions?: { ...; } | undefined; } | { ...; })[]'.
  Type 'RouteConfig' is not assignable to type '{ component?: VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined; ... 9 more ...; pathToRegexpOptions?: { ...; } | undefined; } | { ...; }'.
    Type 'RouteConfigSingleView' is not assignable to type '{ component?: VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined; ... 9 more ...; pathToRegexpOptions?: { ...; } | undefined; } | { ...; }'.
      Type 'RouteConfigSingleView' is not assignable to type '{ component?: VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined; ... 9 more ...; pathToRegexpOptions?: { ...; } | undefined; }'.
        Types of property 'component' are incompatible.
          Type 'Component | undefined' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined'.    
            Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<DefaultData<never>, DefaultMethods<never>, DefaultComputed, DefaultProps> | { ...; } | undefined'.
              Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<DefaultProps>, DefaultProps>' is not assignable to type '{ data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | Prop<any>[] | { type?: Prop<any> | Prop<any>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; }; } | undefined; ... 43 more ...; vuetify?: { ...; } | undefined; }'.
                Types of property 'components' are incompatible.
                  Type '{ [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any>; } | undefined' is not assignable to type '{ [x: string]: VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { ...; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefined, createElement: CreateEleme...'.
                    Type '{ [key: string]: Component<any, any, any, any> | AsyncComponent<any, any, any, any>; }' is not assignable to type '{ [x: string]: VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | ... 1 more ... | { ...; }; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?...'.
                      'string' index signatures are incompatible.
                        Type 'Component<any, any, any, any> | AsyncComponent<any, any, any, any>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | Prop<...>[] | { ...; }; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefine...'.
                          Type 'ComponentOptions<never, any, any, any, any, DefaultProps>' is not assignable to type 'VueConstructor<Vue> | AsyncComponent<any, any, any, any> | { name?: string | undefined; props?: (string | number | symbol)[] | { [x: string]: Prop<...> | Prop<...>[] | { ...; }; } | undefined; model?: { ...; } | undefined; inject?: string[] | ... 1 more ... | undefined; functional: boolean; render?: ((this: undefine...'.
                            Type 'ComponentOptions<never, any, any, any, any, DefaultProps>' is not assignable to type '{ data?: any; props?: any; propsData?: object | undefined; computed?: { [x: string]: (() => any) | { get?: (() => any) | undefined; set?: ((value: any) => void) | undefined; cache?: boolean | undefined; }; } | undefined; ... 41 more ...; vuetify?: { ...; } | undefined; }'.
                              Types of property 'parent' are incompatible.
                                Type 'Vue | undefined' is not assignable to type '{ readonly $el: Element; readonly $options: { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | Prop<any>[] | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; }; } | undefined; ... 43 more ...'.      
                                  Type 'Vue' is not assignable to type '{ readonly $el: Element; readonly $options: { data?: DefaultData<Vue> | undefined; props?: string[] | { [x: string]: Prop<any> | Prop<any>[] | { type?: Prop<any> | Prop<...>[] | undefined; required?: boolean | undefined; default?: any; validator?: ((value: any) => boolean) | undefined; }; } | undefined; ... 43 more ...'.
                                    The types of '$options.pinia' are incompatible between these types.
                                      Type 'Pinia | undefined' is not assignable to type '{ install: (app: App<any>) => void; state: { [x: string]: { [x: string]: any; [x: number]: any; [x: symbol]: any; }; }; use: (plugin: PiniaPlugin) => Pinia; } | undefined'.
                                        Type 'Pinia' is not assignable to type '{ install: (app: App<any>) => void; state: { [x: string]: { [x: string]: any; [x: number]: any; [x: symbol]: any; }; }; use: (plugin: PiniaPlugin) => Pinia; }'.
                                          Types of property 'state' are incompatible.
                                            Type 'Ref<Record<string, StateTree>>' is not assignable to type '{ [x: string]: { [x: string]: any; [x: number]: any; [x: symbol]: any; }; }'.
                                              Index signature for type 'string' is missing in type 'Ref<Record<string, StateTree>>'.