`defineProps` is unable to parse the types generated from `ExtractPropTypes`

[aibayanyu20]

Vue version

3.3.10

Link to minimal reproduction

https://play.vuejs.org/#eNp9Uk1rwzAM/SuaL+2gaxi9hbSwjcK2w1bWwi6+hERJ0zm2sZWuI+S/T3HoB2MUArHee5KfZLXiwdrpvkERi8RnrrIEHqmxoFJdzqUgL8VC6qq2xhG04LCYLA/k0oxWztjNj0UPHRTO1DDiOiOpM6M9AaEPCg9zaKUGSOPwAyDOiWFNrtJlj3RS8yd1j8PmIu3vPUmvMMW5NBvLsag0hig55S7Gt33BwUjtS67FvsejZ1TKwKdxKr8ZsSSJhpa5DgeEtVUpIUcAyfZ+0bYhueuSiKOAVto2BPu72uSoeDzMSwERk0l0kS8mPDi+vqjK6c4bzdMNzUuRmdpWCt27pYrtSREP0+m5lN19vwaMXIOTI55tMfv6B9/5Q49JsXLo0e1RihNHqSuRBnq5fsMDn08ku28Uq6+QH+iNanqPg+yx0TnbvtAFty9hL/ghN55fC7U/NtUbDY8b9FLwajxdaf1sdzadHZdCdL8mAeOA

Steps to reproduce

see the reproduction

What is expected?

I hope that defineProps can parse the types generated from ExtractPropTypes.

What is actually happening?

Currently, attempting to parse with defineProps from ExtractPropTypes results in errors. Any reference for a workaround or solution would be appreciated.

System Info

No response

Any additional comments?

No response

[so1ve]

Try @vue.ts/complex-types

[sadeghbarati]

List of TypeScript errors in Vue (SFC) files I faced

• [@vue/compiler-sfc] Unresolvable type: TSConditionalType
• [@vue/compiler-sfc] Unresolvable type: TSTypeQuery
• [@vue/compiler-sfc] Failed to resolve extends base type. If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it

@so1ve Can we expect @vue.ts/complex-types in the Vue Core :pray:?

I wonder how the Svelte compiler supports complex types? Class Variance Authority Svelte example

---

https://github.com/vuejs/rfcs/discussions/549 https://github.com/vuejs/rfcs/discussions/547

---

https://github.com/vuejs/core/pull/9556

If we don't get complex types support for SFC some of the type helpers will be pointless, But it's working in .ts or .tsx right? but Vue Compiler can optimize .vue files

[so1ve]

@sadeghbarati Svelte doesn't "resolve" types to runtime props actually - these type definitions are only used for IDE usage, and they don't affect runtime behavior. But vue needs them to cast types.

[pikax]

@aibayanyu20 do you mind providing an use case for this?

The only use case I see this is when retrieving props from an imported component, if that's the use case I believe is better accessing the component props directly instead of generating through types

<script setup>
import Comp from './Comp.vue'


// this will be supported on https://github.com/vuejs/core/pull/9556
defineProps(Comp.props)
</script>

Since of the limitation when using defineProps with type based, I would recommend object based instead.

[aibayanyu20]

like this online demo ?

[pikax]

like this online demo ?

No, not a reproduction, but actual use case, why do you take that approach instead of another approach

[aibayanyu20]

Maybe I explained here why this is used

[aibayanyu20]

This does seem to be a problem, regardless of the usage and writing method, I still hope this situation can be dealt with, thanks

[mrcego]

Maybe I explained here why this is used

It's the exact use case for Tailwind Variants, where you get variants as typeof from VariantProps util, Vue compiler resolve as TSConditionalType bug.

[Shuyinsama]

Apologies for hijacking this issue but since this talks about the same issues I am experiencing I didn't want to open a new issue.

I am running against this issue in my NPM Workspace. I've read the docs about Syntax limitation and followed other links explaining the limitations.

I just don't understand the exact issue in my case. I get that it might be confusing for Vue to parse interfaces that extend more than once. But it's not like I am doing anything complex.

I have a very small reproducable project here: https://codesandbox.io/p/devbox/cocky-murdock-yc4qmz When running the npm run build command it gives the following error

error during build:
[vite:vue] [@vue/compiler-sfc] Failed to resolve extends base type.
If this previously worked in 3.2, you can instruct the compiler to ignore this extend by adding /* @vue-ignore */ before it, for example:

interface Props extends /* @vue-ignore */ Base {}

Note: both in 3.2 or with the ignore, the properties in the base type are treated as fallthrough attrs at runtime.

/project/workspace/packages/vue/lib/components/form-elements/datepicker/FormDatepicker.vue
9  |  });
10 |  
11 |  interface VueFormDatepickerProps extends FormDatepickerProps {
   |                                           ^^^^^^^^^^^^^^^^^^^
12 |    infoModal?: InfoModalProps & { content: VNode | string | number | boolean };
13 |  }
file: /project/workspace/packages/vue/lib/components/form-elements/datepicker/FormDatepicker.vue`

[Shuyinsama]

Yeah so this issue is really starting to bug me. The compiler just randomly fails on components that use an extend for weeks. I change a completely different component and suddenly an old component starts to produce this error.

The error message is really unclear. If I knew what the actual issue was maybe I could work around it. /* @vue-ignore */ seems to break the components too. My other workaround is duplicating all properties on shared interfaces so that I don't extend. Meaning I have to duplicate my code dozens of times

[so1ve]

Yeah so this issue is really starting to bug me. The compiler just randomly fails on components that use an extend for weeks. I change a completely different component and suddenly an old component starts to produce this error.

The error message is really unclear. If I knew what the actual issue was maybe I could work around it. /* @vue-ignore */ seems to break the components too. My other workaround is duplicating all properties on shared interfaces so that I don't extend. Meaning I have to duplicate my code dozens of times

https://github.com/so1ve/vue.ts/tree/main/packages/complex-types Again? :)

[Shuyinsama]

@so1ve thank you for the comment and package but it does not seem to work in my case. I'll open an issue for it in the project

Edit: nvm found my issue, I needed to use the rollup one instead of vite