Description
Vue version
3.3.4
Link to minimal reproduction
https://github.com/tragid/vue-default-export-error
Steps to reproduce
I'm trying to build a Button component using Typescript and utilizing types of HTML element imported from Vue package. Here is the code:
import type { ButtonHTMLAttributes, LinkHTMLAttributes } from 'vue'
import type { RouterLinkProps } from 'vue-router'
type ButtonOrAnchorProps = BaseProps & ButtonHTMLAttributes & LinkHTMLAttributes
type ButtonAsRouterLink = BaseProps & RouterLinkProps & LinkHTMLAttributes
type ButtonProps = ButtonAsRouterLink | ButtonOrAnchorProps
const props = defineProps<ButtonProps>()
What is expected?
The type should be imported normally without any error.
What is actually happening?
Vue throws error:
[@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type
It's kind of strange because I can still access the attributes from props
variable like props.href
but the app is not running.
What I tried is to create alternative types that extend ButtonHTMLAttributes
and LinkHTMLAttributes
, it's like:
import { type ButtonHTMLAttributes, type LinkHTMLAttributes } from 'vue'
export interface BtnHTMLAttr extends /* @vue-ignore */ ButtonHTMLAttributes {}
export interface LinkHTMLAttr extends /* @vue-ignore */ LinkHTMLAttributes {}
The import error is gone but the app is still not functioning properly. When I add a href
prop to the component, seems like the component doesn't recognize href
prop
System Info
No response
Any additional comments?
No response
Activity
Shyam-Chen commentedon Jul 20, 2023
#8522
viet34tqc commentedon Jul 20, 2023
Hi, thanks for your reply.
For some reasons, I cannot get the
href
props even if I pass it in parent component. Here is my code for Button component:And I pass the
href
prop like:<VButton href="dsadsad">fdss</VButton>
However,
href
isn't recognized. What is the problem?Shyam-Chen commentedon Jul 20, 2023
Ah! I didn't look carefully, but currently, I have separated Button and Link into two separate components.
edison1105 commentedon Nov 6, 2024
The issue can no longer be reproduced using the latest version of Vue in the above minimal reproduction. However, according to your other comments, your reproduction does not seem to match the actual issue you encountered. If the latest version of Vue still does not solve your problem, please try creating a new issue and include a complete reproduction that fully matches the issue.