Property checking of dynamically imported component

[frankykubo]

I want to dynamically initialize federated component with defineAsyncComponent method and provide prop typings.

<script setup lang="ts">
    interface Props {
        testProp: string,
    }

    const ComponentTest1: DefineComponent<Props> = defineAsyncComponent(() => import('remote_app/Button'));
    let ComponentTest2: DefineComponent<Props>;
    const Bar = defineAsyncComponent<DefineComponent<Props>>(
        () => import('remote_app/Button') as any,
    );
</script>

<template>
    <ComponentTest1 />
    <ComponentTest2 />
</template>

What happens is quite interesting. Both components register that a prop is missing:

When I start writing the attribute, I have intellisense only for the ComponentTest2 component:

For ComponentTest1, there is no type-checking happening.

Why is that? Is this fixable?

[so1ve]

Could you please provide a minimal reproduction?

Sorry, didn't see that codeblock.

[frankykubo]

Same scenario happens even when I am importing a local .vue component:

const Navbar = defineAsyncComponent(() =>
  import('@/components/includes/Navbar.vue'),
);

Inside Navbar.vue, I have props defined like this (just for an example):

withDefaults(defineProps<{bookOptions?: string[]}>(), {
  bookOptions: undefined,
});

Interesting is that it looks like typescript within script setup can see the props (see image, I got some sort of intellisense):

But in template, it remains the same, no intellisense provided.