[vite:dts] [@vue/compiler-sfc] Failed to resolve import source "./button".

[antoniogiroz]

Describe the bug

I encountered an error in a Vue 3 SFC while importing an interface for Props using the new Vue version 3.3.0-beta.5.

This error only happens when I added the dts plugin in the vite.config.ts file:

vue-components-demo on  main [✘!?] is 📦 v0.1.0 via ⬢ v18.14.1 took 3s 
➜ nr build

> [email protected] build ~/vue-components-demo
> vite build

vite v4.3.5 building for production...
✓ 4 modules transformed.

[vite:dts] Start generate declaration files...
src/components/button/index.ts:2:41 - error TS2307: Cannot find module './button.vue' or its corresponding type declarations.

2 export { default as CustomButton } from './button.vue';
                                          ~~~~~~~~~~~~~~

✓ built in 1.15s
[vite:dts] Declaration files built in 758ms.

[vite:dts] [@vue/compiler-sfc] Failed to resolve import source "./button".

anonymous.vue
11 |  });
12 |  
13 |  const props = withDefaults(defineProps<ButtonProps>(), {
   |                                         ^^^^^^^^^^^
14 |    size: 'md',
15 |    type: 'button',
file: ~/vue-components-demo/src/components/button/button.vue
error during build:
Error: [@vue/compiler-sfc] Failed to resolve import source "./button".

anonymous.vue
11 |  });
12 |  
13 |  const props = withDefaults(defineProps<ButtonProps>(), {
   |                                         ^^^^^^^^^^^
14 |    size: 'md',
15 |    type: 'button',
    at ScriptCompileContext.error (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:15839:11)
    at importSourceToScope (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18388:16)
    at resolveTypeFromImport (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18353:23)
    at innerResolveTypeReference (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18282:14)
    at resolveTypeReference (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:18271:36)
    at innerResolveTypeElements (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17943:24)
    at resolveTypeElements (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:17900:35)
    at resolveRuntimePropsFromType (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19236:20)
    at genRuntimePropsFromTypes (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19212:17)
    at genRuntimeProps (~/vue-components-demo/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19202:18)
 ELIFECYCLE  Command failed with exit code 1.

Reproduction

https://github.com/antoniogiroz/vue-components-demo

Steps to reproduce

Clone the repo

git clone https://github.com/antoniogiroz/vue-components-demo

Install the dependencies:

npm install or pnpm install

Build the project and check the results in the console:

npm run build or pnpm build

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 55.80 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
    npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 110.0
    Safari: 16.4
  npmPackages:
    @vitejs/plugin-vue: ^4.2.1 => 4.2.1 
    vite: ^4.3.5 => 4.3.5 
    vite-plugin-dts: ^2.3.0 => 2.3.0

Validations

• Read the FAQ.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[dakt]

Same here. Now with official 3.3 release.

[antoniogiroz]

I have updated the reproduction project with the latest versions.

[guendev]

any update?

[ckvv]

Maybe this can be fixed by updating @vue/compiler-sfc
vuejs/core#8140

[atcha]

Hello.
I've exactly the same problem.
After seeing your answer @ckvv, i've updated vue with the latest @vue/compiler-sfc and still have the same error.

[ckvv]

Hello. I've exactly the same problem. After seeing your answer @ckvv, i've updated vue with the latest @vue/compiler-sfc and still have the same error.

I had the same problem (triggered only in Vue files)

This error can currently be eliminated by alias,

import type { ButtonProps } from './types'; //❌
import type { ButtonProps } from '@/components/button/types'; //✅

[atcha]

Thanks, that's currently a workaround :).

[michtio]

Even with the suggested alias use from above I keep on hitting that error in .vue files:

interface Alert {
    successText: string,
    errorText: string,
    modelValue?: string|boolean,
}

interface Field {
    field: Object,
    namespace: Array<any>,
    namespaceSuffix: Array<any>,
}

interface Form {
    handle: string
}

interface Page {
    form: Object,
    page: Object,
    pageIndex: number,
    loading: boolean,
    modelValue: number,
}

export type {
    Alert,
    Field,
    Form,
    Page,
}

import type { Form } from '@/js/interfaces/props'
import { computed, ref } from 'vue'

const props = defineProps<Form>()

Getting:

10:46:07 AM [vite] Internal server error: [@vue/compiler-sfc] Failed to resolve import source "@/js/interfaces/props".
icarus-academy-site-vite-1        | 
icarus-academy-site-vite-1        | /var/www/project/src/vue/organisms/forms/FormieForm.vue
icarus-academy-site-vite-1        | 14 |      import { computed, ref } from 'vue'
icarus-academy-site-vite-1        | 15 |  
icarus-academy-site-vite-1        | 16 |      const props = defineProps<Form>()
icarus-academy-site-vite-1        |    |                                ^^^^
icarus-academy-site-vite-1        | 17 |  
icarus-academy-site-vite-1        | 18 |      const form = ref<boolean>(false)
icarus-academy-site-vite-1        |   Plugin: vite:vue

[qmhc]

Should be fixed in 3.0.0-beta.2, waiting your feedbacks.

Fixed in 3.0.0.