Vue defineProps<> can't use imported Interface

[halo-apps]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNp9kstqwzAQRX9lqk0SSGJKu0qdQFsCaRdtSAvdaGPssa1UloQeacD43ztWyANastPMvRedGallj8ZMdwHZjKUut8J4cOiDAZmpas6Zd5wtuBKN0dZDa7Ecg9cbLF0HpdUNcEZpzh7OnnVWCVWtMCvQrq02Z2etVTYxeXRL9GB6FeZQYCkURm/6J70YjiBJ8iw4BF8joLXacpVr5Tw0rqI8UQ0HK5RSw5e2srgZjLhKk8M8RE+Fx8bIzCNVAGl9u2jbGO66NKEqdoUywcNu0ugCJc1OOmeQkJgmF3k2pq3Q9aWoplunFa2u7fOc5boxQqJ9N14QHmcziEqvZUT38xp73gYcH/t5jfn3P/2t2/c9ztYWHdod7fik+cxW6A/y8uMN93Q+iUQfJLmviBt0Woae8WB7Cqog7AtfpH2JD0qv8emWe4/KHYfqQXtnF/3xBzxfGf2Meze9jzmuOtb9AgoL1c0=

Steps to reproduce

<script setup lang="ts">
import {ref, toRefs} from "vue";
import {PagingHeaderProps} from "hona-pc";
let props = defineProps<PagingHeaderProps>() //Cause the error
</script>

What is expected?

App runs normaly

What is actually happening?

[plugin:vite:vue] Missing semicolon. (8778:3)
??/src/components/partials/ctl_table/PagingHeader.vue:8778:3
at constructor (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:353:19)
at TypeScriptParserMixin.raise (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:3277:19)
at TypeScriptParserMixin.semicolon (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:3598:10)
at TypeScriptParserMixin.parseExpressionStatement (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:12755:10)
at TypeScriptParserMixin.parseExpressionStatement (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:9216:26)
at TypeScriptParserMixin.parseStatementContent (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:12366:19)
at TypeScriptParserMixin.parseStatementContent (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:9132:18)
at TypeScriptParserMixin.parseStatementLike (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:12229:17)
at TypeScriptParserMixin.parseModuleItem (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:12206:17)
at TypeScriptParserMixin.parseBlockOrModuleBlockBody (??\node_modules.pnpm@[email protected]\node_modules@babel\parser\lib\index.js:12786:36

System Info

Win11 x64

Any additional comments?

No response

[haoqunjiang]

Please provide an actually runnable reproduction. I can't see the error from the provided link.

[halo-apps]

Please provide an actually runnable reproduction. I can't see the error from the provided link.

This problem must import any third Package which contains interface declaration, thus I can't supply a runable demo. Please Copy code to local to reproduction this.

[edison1105]

https://vuejs.org/api/sfc-script-setup.html#type-only-props-emit-declarations

The latest version of Vue supports referencing imported and a limited set of complex types in the type parameter position. However, because the type to runtime conversion is still AST-based, some complex types that require actual type analysis, e.g. conditional types, are not supported. You can use conditional types for the type of a single prop, but not the entire props object.

[halo-apps]

In my project, I have many sub components(50+) which have the same props option, so I wan't to reuse entire props object, so I can reduce 98% coding of props object declaration, It's really useful in dynamic imported components seceneries.
SO: Will vue support this secenary, and when? Looking forward to it.

[edison1105]

try https://github.com/so1ve/vue.ts/tree/main/packages/complex-types

[haoqunjiang]

As there's no runnable reproduction, I'm closing this issue. There're already several other issues on complex types support, you can keep an eye on them:
#10514
#9877
#8468