Skip to content

Can't import interface / type and use them with defineProps "failed to resolve import source" #2048

@Y0me

Description

@Y0me

Version

17.2.1

Reproduction link

https://github.com/Y0me/defineProps

Steps to reproduce

npm run dev

What is actually happening?

I'm trying to use the new import type feature in vue 3.3 to defineProps with imported type/interface.

Example

<script setup lang="ts">
import type {IHelloWorld} from "./type";

const props = defineProps<IHelloWorld>()
// const props = defineProps<{props: IHelloWorld}>()

</script>

When I compile the project, I get the following errors :

ERROR in ./src/app.vue?vue&type=script&setup=true&lang=ts (./node_modules/esbuild-loader/dist/index.cjs??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/app.vue?vue&type=script&setup=true&lang=ts)
Module Error (from ./node_modules/vue-loader/dist/index.js):
[@vue/compiler-sfc] Failed to resolve import source "./type".

C:\Repository\defineProps\src\app.vue
2  |  import type {IHelloWorld} from "./type";
3  |
4  |  const props = defineProps<IHelloWorld>()
   |                            ^^^^^^^^^^^
5  |  // const props = defineProps<{props: IHelloWorld}>()
6  |
Error: [@vue/compiler-sfc] Failed to resolve import source "./type".

C:\Repository\defineProps\src\app.vue
2  |  import type {IHelloWorld} from "./type";
3  |
4  |  const props = defineProps<IHelloWorld>()
   |                            ^^^^^^^^^^^
5  |  // const props = defineProps<{props: IHelloWorld}>()
6  |
    at ScriptCompileContext.error (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:15841:11)
    at importSourceToScope (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:18428:16)
    at resolveTypeFromImport (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:18393:23)
    at innerResolveTypeReference (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:18299:14)
    at resolveTypeReference (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:18288:36)
    at innerResolveTypeElements (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:17945:24)
    at resolveTypeElements (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:17902:35)
    at resolveRuntimePropsFromType (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19312:20)
    at genRuntimePropsFromTypes (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19288:17)
    at genRuntimeProps (C:\Repository\defineProps\node_modules\@vue\compiler-sfc\dist\compiler-sfc.cjs.js:19278:18)
 @ ./src/app.vue?vue&type=script&setup=true&lang=ts 1:0-205 1:0-205 1:206-400 1:206-400
 @ ./src/app.vue 1:0-65 2:0-60 2:0-60 5:49-55

ERROR in ./src/app.vue?vue&type=script&setup=true&lang=ts (./node_modules/esbuild-loader/dist/index.cjs??clonedRuleSet-1!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./src/app.vue?vue&type=script&setup=true&lang=ts)
Module build failed (from ./node_modules/vue-loader/dist/index.js):
TypeError: Cannot read properties of null (reading 'content')
    at selectBlock (C:\Repository\defineProps\node_modules\vue-loader\dist\select.js:23:45)
    at Object.loader (C:\Repository\defineProps\node_modules\vue-loader\dist\index.js:92:41)
 @ ./src/app.vue?vue&type=script&setup=true&lang=ts 1:0-205 1:0-205 1:206-400 1:206-400
 @ ./src/app.vue 1:0-65 2:0-60 2:0-60 5:49-55

webpack 5.85.0 compiled with 2 errors in 215 ms

If I wrap the interface, the build succeeds.

const props = defineProps<{props: IHelloWorld}>()

What is expected?

I guess a success webpack build.

Thanks !

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions