Subscribe on changes!

v3.3 extending imported Props from alias-imported component throws compiler-error

avatar
May 17th 2023

Vue version

3.3.2

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-gym3of?file=src%2Fcomponents%2FParentComp.vue

Steps to reproduce

Open the reproduction link, in the file ParentComp.vue are three different imports:

  1. Import Props from ts file with alias path: '@/components/SomeTypes.ts'
  2. Import Props from Vue component with relative import: ./ChildComp.vue'
  3. Import Props from Vue component with alias path: '@/components/ChildComp.vue'

By commenting/uncommenting the appropriate lines each import can be tested one by one.

What is expected?

1, 2, and 3 should work

What is actually happening?

While 1 and 2 work, 3 throws an error:

[plugin: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.

The culprit seems to be the combination of:

  • Importing from a Vue component
  • Importing with alias-path

By removing one of the two the errors does not get thrown.

System Info

No response

Any additional comments?

No response

avatar
Jul 24th 2023

@yyx990803 Using naive-ui will still give you an error:

  • "naive-ui": "^2.34.4",
  • "vue": "^3.3.4",
import type { UploadProps } from 'naive-ui';

export interface Props extends UploadProps {
  id?: number;
}

defineProps<Props>();

https://stackblitz.com/edit/vitejs-vite-2ewfux?file=src%2Fcomponents%2FParentComp.vue

avatar
Jul 25th 2023

@ColinLQ UploadProps is a very complex type and not supported, you should use /* @vue-ignore */ ignore it.