[Vue] TS2307: Cannot find module '@/App.vue' error

원인 TS2307: Cannot find module '@/App.vue' error

 

위와 같이 계속 TS 파일에서 @로 시작하는 절대 경로를 못찾아서 이상했다. 

빌드를 하면, 실제 경로를 잘 찾는다. 

tsconfig.json

vite.config.ts

해결방법

vue3의 경우, vite-env.d.ts 파일에 vue 파일에 대한 타입을 추가 해주어야 한다고 한다. 

ref. https://lobotuerto.com/notes/build-a-vue3-typescript-dev-environment-with-vite

ref. https://stackoverflow.com/questions/42002394/importing-vue-components-in-typescript-file

Build a Vue 3 + TypeScript dev environment with Vite - lobo_tuerto's notes

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
  const component: DefineComponent<{}, {}, any>
  export default component
}

vue2의 경우 

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

위와 같이 타입 설정을 추가하면, error 표시가 사라진다.