Description
Vue - Official extension or vue-tsc version
2.2.2
VSCode version
1.97.2
Vue version
3.5.13
TypeScript version
5.7.3
System Info
package.json dependencies
Steps to reproduce
v2.2.0 Does not have any of these issues. As soon as I updated to v.2.2.2, I started to get these errors. Even with the errors showing, the code builds with no errors and works as expected.
Setup
We need 2 components who both use local interfaces to define their props. Ex: const props = defineProps<IProps>();
One component is a extends the other with other properties.
Component A: interface IProps extends IExample {}
Component B: interface IProps extends IExample2, IExample {}
Below are the code snippets in question.
BaseModal.vue
<script setup lang="ts">
interface IProps extends IModal, ICoreElements {}
const props = withDefaults(defineProps<IProps>(), {
closeOnOverlayClick: 'yes',
modalPosition: 'center'
});
</script>
PopupModal.vue
<script setup lang="ts">
interface IProps extends IPanel, IModal, ICoreElements {}
const props = withDefaults(defineProps<IProps>(), {
panelHeight: '100%',
panelWidth: '100%'
});
const { panelCssClass, panelHeight, panelWidth, ...modalProps } = props;
</script>
<template>
<BaseModal ref="modal" v-bind="modalProps">
<BasePanel
:css-class="panelCssClass"
:height="panelHeight"
:width="panelWidth"
></BasePanel>
</BaseModal>
</template>
What is expected?
No errors or red squiggly lines.
What is actually happening?
Getting a couple of errors on PopupModal.vue
In the Script
Exported variable 'modal' has or is using name 'IProps' from external module "d:/Projects/vscode-vueextension-bug/src/components/core/BaseModal.vue" but cannot be named. ts-plugin(4023)
In the Template
Exported variable '__VLS_1' has or is using name 'IProps' from external module "d:/Projects/vscode-vueextension-bug/src/components/core/BaseModal.vue" but cannot be named. ts-plugin(4023)
Link to minimal reproduction
https://github.com/ajaxtheriot/vscode-vueextension-bug
Any additional comments?
There is a work around so I won't get these errors, the problem I have is the code is working as intended without the workarounds. The work around would be to have the BaseModal define directly to the two interfaces.
BaseModal.vue
<script setup lang="ts">
const props = withDefaults(defineProps<IModal & ICoreElements>(), {
closeOnOverlayClick: 'yes',
modalPosition: 'center'
});
</script>
This code now works however if I want to make a component called SpecialPopupModal.vue that uses the PopupModal.vue, below becomes a problem:
SpecialPopupModal.vue
<script setup lang="ts">
interface IProps extends IPanel, IModal, ICoreElements {
specialProperty: string;
}
const props = defineProps<IProps>();
const { specialProperty, ...popupProps } = props;
const popup = ref<InstanceType<typeof PopupModal> | null>(null);
</script>
<template>
<PopupModal ref="popup" v-bind="popupProps">
</PopupModal>
</template>
It seems using defineProps<IProps>() and not exporting IProps for others to use, even if their props are defined exactly the same, breaks the interpreter and makes it think there is an issue.