Typescript cannot resolve Vue Components (imported from a library) in Astro files

[leifmarcus]

Astro Info

Astro                    v3.0.13
Node                     v18.16.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             pcom-astro-vite-config
                         @astrojs/partytown
                         @astrojs/vue

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When importing a Vue component from a package/library, that is build width the vite library mode and has types declared with the vite-plugin-dts, then astro files cannot resolve the types for the props of the Vue component.

Instead, a type error is shown:

Type '{ testProp: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'testProp' does not exist on type 'IntrinsicAttributes'

The type declaration for this file looks like this (automatically generated during lib build):

import type { PropType } from 'vue';
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
    testProp: {
        type: PropType<'test'>;
        default: string;
    };
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    testProp: {
        type: PropType<'test'>;
        default: string;
    };
}>>, {
    testProp: 'test';
}, {}>, {
    default?: (_: {}) => any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};

A temporary fix for this is to whitelist all IntrinsicAttributes in astroHTML.JSX, which will not break the typescript check, but is not really type safe.

declare namespace astroHTML.JSX {
  interface IntrinsicAttributes {
    // [key: string]: any;
  }
}

What's the expected result?

Astro files should be able to correctly interpret the typescript typings for imported Vue files with correct types for the Vue component properties.

This should also work for Vue Components, that are not imported from Vue SFC Files, but also when imported from build javascript files.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-dggmu9

Participation

• [ ] I am willing to submit a pull request for this issue.