defineCustomElement type error when component defines emit and imports other component

[JoCa96]

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-jbymki?file=src/index.ts

Steps to reproduce

1. Set up a new vue project using typescript and vite
2. Create two minimal SFC components with lang="typescript"
3. In one component import the other and define any emit using defineEmits and type declaration
4. Create an index.ts and call defineCustomElement with the component from the step before
5. execute vue-tsc

What is expected?

No error

What is actually happening?

src/index.ts:4:35 - error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type 'DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, { click: () => void; }, string, PublicProps, Readonly<...> & { ...; }, {}>' is not assignable to parameter of type 'new (...args: any[]) => ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>'.
      Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & { onClick?: (() => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any...' is not assignable to type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}>'.
        Type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & { onClick?: (() => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any...' is not assignable to type '{ $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly<InternalSlots>; $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 '$emit' are incompatible.
            Type '(event: "click") => void' is not assignable to type '(event: string, ...args: any[]) => void'.
              Types of parameters 'event' and 'event' are incompatible.
                Type 'string' is not assignable to type '"click"'.

4 const Comp1 = defineCustomElement(Comp1Vue);
                                    ~~~~~~~~

  node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts:54:25
    54 export declare function defineCustomElement(options: {
                               ~~~~~~~~~~~~~~~~~~~
    The last overload is declared here.


Found 1 error in src/index.ts:4

Any additional comments?

I created an issue with vue before, but the bug seems to originate from volar/vue-tsc.

[johnsoncodehk]

See vuejs/core#7782 (comment)