Skip to content

[Vapor] Type error when using type-based declaration for a prop passed from createVaporApp #14467

@paul-rouse

Description

@paul-rouse

Vue version

3.6.0-beta.6

Link to minimal reproduction

https://github.com/paul-rouse/vue-beta-issue.git

Steps to reproduce

git clone https://github.com/paul-rouse/vue-beta-issue.git
cd vue-beta-issue
npm install
npm run type-check

What is expected?

Clean type check

What is actually happening?

Error from TypeScript:

src/main.ts:4:16 - error TS2345: Argument of type '(__VLS_props: VNodeProps & AllowedComponentProps & ComponentCustomProps & { config: string; } & Record<string, unknown>, __VLS_ctx?: { ...; } | undefined, __VLS_exposed?: ((exposed: {}) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { __ctx?: Awaited<typeof __VLS_setup>; }' is not assignable to parameter of type 'VaporComponent'.
  Type '(__VLS_props: VNodeProps & AllowedComponentProps & ComponentCustomProps & { config: string; } & Record<string, unknown>, __VLS_ctx?: { ...; } | undefined, __VLS_exposed?: ((exposed: {}) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { __ctx?: Awaited<typeof __VLS_setup>; }' is not assignable to type 'FunctionalVaporComponent<{}, {}, StaticSlots, Record<string, any>>'.
    Type '(__VLS_props: VNodeProps & AllowedComponentProps & ComponentCustomProps & { config: string; } & Record<string, unknown>, __VLS_ctx?: { ...; } | undefined, __VLS_exposed?: ((exposed: {}) => void) | undefined, __VLS_setup?: Promise<...>) => VNode<...> & { __ctx?: Awaited<typeof __VLS_setup>; }' is not assignable to type '(props: Readonly<{}>, ctx: { emit: (event: string, ...args: any[]) => void; slots: StaticSlots; attrs: Record<string, any>; expose: <T extends Record<string, any> = Record<...>>(exposed: T) => void; }) => VaporRenderResult<...>'.
      Types of parameters '__VLS_props' and 'props' are incompatible.
        Type 'Readonly<{}>' is not assignable to type 'VNodeProps & AllowedComponentProps & ComponentCustomProps & { config: string; } & Record<string, unknown>'.
          Property 'config' is missing in type 'Readonly<{}>' but required in type '{ config: string; }'.

4 createVaporApp(App, {config: "World"}).mount('#app')
                 ~~~

  src/App.vue:3:5
    3     config: string
          ~~~~~~
    'config' is declared here.

System Info

Any additional comments?

  • This is specific to vapor mode - 3.6.0-beta.6 has no problem with the same thing without vapor.
  • It only affects type-based declaration - run-time declaration is a successful workaround (including in the case of the more complex type in my real application):

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions