vuejs/vue-loader

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

Y0me opened this issue · 2 comments

Y0me commented

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 !

JosephAnson commented

Currently this is causing me the same issues as well, I believe it's same issue as described as above, only experiencing it with jest however. Wrapping the interface with another interface seems to fix the issue, however that'll change the way you need to interact with the component by quite a bit.

defineProps<{props: IHelloWorld}>()

Error received is the same mentioned above:

  TypeError: Cannot read properties of undefined (reading 'sys')
      at resolveFS (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18372:35)
      at importSourceToScope (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18397:14)
      at resolveTypeFromImport (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18393:23)
      at innerResolveTypeReference (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18299:14)
      at resolveTypeReference (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18288:36)
      at innerResolveTypeElements (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17945:24)
      at resolveTypeElements (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17902:35)
      at resolveRuntimePropsFromType (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19312:20)
      at genRuntimePropsFromTypes (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19288:17)
      at genRuntimeProps (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19278:18)
      at compileScript (node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:20383:21)
      at processTemplate (node_modules/@vue/vue3-jest/lib/process.js:94:31)
      at Object.module.exports [as process] (node_modules/@vue/vue3-jest/lib/process.js:166:26)
      at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:545:31)
      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:674:40)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:726:19)
      at Object.<anonymous> (src/components/Base/Button.spec.ts:4:1)
Huntedpix commented

Hello !

I'm experiencing the same exact same issue than Y0me.