I am using Vue 3 + Vite + TS and am trying to build a single-spa MF. For instance, I need to pass a prop to one of the micro frontends. When I declare the props in the App.vue, however, the build fails
src/main.ts:24:16 - error TS2769: No overload matches this call.
The last overload gave the following error.
Argument of type 'DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to parameter of type 'DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 5 more ..., {}>'.
Type 'DefineComponent<__VLS_TypePropsToRuntimeProps<Props>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: Wat...'.
Type '{ $: import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<...> & import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").VNodeProps & import("<MY_DIR>/no...' is not assignable to type '{ $: import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<...> & import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").VNodeProps & import("<MY_DIR>/no...'. Two different types with this name exist, but they are unrelated.
Type '{ $: import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<...> & import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").VNodeProps & import("<MY_DIR>/no...' is not assignable to type '{ $: import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{ ...; } & ... 1 more ... & {}> & import("<MY_DIR>/node_modules/@vue/runtime-core/dist/runtime-core").VNodeProps & import("/User...'.
Types of property '$options' are incompatible.
Type 'ComponentOptionsBase<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<...>, string, {}> & MergedComponentOptionsOverride' is not assignable to type 'ComponentOptionsBase<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}> & MergedComponentOptionsOverride'.
Type 'ComponentOptionsBase<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<...>, string, {}> & MergedComponentOptionsOverride' is not assignable to type 'ComponentOptionsBase<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}>'.
Types of property 'data' are incompatible.
Type '((this: CreateComponentPublicInstance<...>, vm: CreateComponentPublicInstance<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, {}, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>) => unknown) | undefined' is not assignable to type '((this: CreateComponentPublicInstance<...>, vm: CreateComponentPublicInstance<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, {}, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>) => {}) | undefined'.
Type '(this: CreateComponentPublicInstance<...>, vm: CreateComponentPublicInstance<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, {}, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>) => unknown' is not assignable to type '(this: CreateComponentPublicInstance<...>, vm: CreateComponentPublicInstance<Readonly<{ authToken?: unknown; } & { authToken: string; } & {}>, {}, {}, {}, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>) => {}'.
Type 'unknown' is not assignable to type '{}'.
24 return h(App, {
~~~
node_modules/@vue/runtime-core/dist/runtime-core.d.ts:948:25
948 export declare function h<P>(type: DefineComponent<P>, props?: (RawProps & P) | ({} extends P ? null : never), children?: RawChildren | RawSlots): VNode;
~
The last overload is declared here.
The code I added to App.vue that breaks everything
interface Props {
authToken: string;
}
const props = defineProps<Props>();