Vue version

3.3.4

Link to minimal reproduction

https://github.com/Disservin/vue-ts-error/tree/unresolvable-type/vue-ts-error

Steps to reproduce

Clone the repository and cd into vue-ts-error

npm run build-only


> test@0.0.0 build-only
> vite build

vite v4.3.9 building for production...
✓ 11 modules transformed.
✓ built in 805ms
[vite:vue] [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

/Users/user/documents/github/vue-ts-error/src/components/VTest.vue
4  |  
5  |  <script setup lang="ts">
6  |  defineProps<Test>();
   |              ^^^^
7  |  </script>
8  |  
file: /Users/user/documents/github/vue-ts-error/src/components/VTest.vue
error during build:
Error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

What is expected?

The build should finish normal and throw no errors.

What is actually happening?

The Test interface cannot be unused for defineProps. You will get

Error: [@vue/compiler-sfc] Unresolvable type reference or unsupported built-in utility type

The current workaround is to explictly import the type and export the interface

VTest.vue

import type { Test } from "@/types/index";

index.d.ts

export interface Test {
    name: string;
}

System Info

No response

Any additional comments?

direct link to the component

direct link to the index

You can only use the current file's type or interface at present.

You can only use the current file's type or interface at present.

I dont follow, you can use the interface like this in the sfc just fine. However, trying to use it for defineProps fails and it's not immediately clear to the programmer why you can use it like shown below but not use it for defining props. Also, at least with vscode and the correct extensions you get no ide error (different topic anyway).

const test: Test = {
    name: "name"
}

You can only use the current file's type or interface at present.

I dont follow, you can use the interface like this in the sfc just fine. However, trying to use it for defineProps fails and it's not immediately clear to the programmer why you can use it like shown below but not use it for defining props. Also, at least with vscode and the correct extensions you get no ide error (different topic anyway).

const test: Test = {
    name: "name"
}

I tried again. If you use interface from .ts file, it can work normally，like that: If you use the interface from .d.ts file, it will throw the type error:

I read the source code, found that framework will register your imports when compiling the template, You didn't import the Test type explicitly, so it can't recognize your type. If you want to import type from d.ts files, you can export the namespace like that: and import the namespace explicitly, and then it can working;

You can only use the current file's type or interface at present.

I dont follow, you can use the interface like this in the sfc just fine. However, trying to use it for defineProps fails and it's not immediately clear to the programmer why you can use it like shown below but not use it for defining props. Also, at least with vscode and the correct extensions you get no ide error (different topic anyway).

const test: Test = {
    name: "name"
}

As to why common variables you can use the namespace without importing, defineProps type will be used when compiling, common variables's type didn't, vscode can deal with that.

@Neverflow external imports type are already supported in 3.3. for global type

vue({
  script: {
    globalTypeFiles: [
      './src/types/index.d.ts'
    ]
  }
})

and

//src/types/index.d.ts
declare interface Test {
    name: string;
}

@Neverflow external imports type are already supported in 3.3. for global type

vue({
  script: {
    globalTypeFiles: [
      './src/types/index.d.ts'
    ]
  }
})

and

//src/types/index.d.ts
declare interface Test {
    name: string;
}

oh, thanks

Oh great well somehow missed that completely, only annoying thing is that it's still missing from the typescript declarations. Ty for the help