[Vue] Cannot find module '...' or its corresponding type declarations

💡 `Cannot find module '...' or its corresponding type declarations.` 오류를 해결해보자!

목표

• 위 오류에 대한 해결방법을 정리할 수 있다.
• 동일한 오류가 발생했을 때, 스스로 해결할 수 있다.

 

Vue Quick Starter를 통해 프로젝트를 생성했음에도

'Cannot find module '...' or its corresponding type declarations.' 라는 오류 메시지가 출력됐다.

이를 해결하기 위해서는 어떻게 해야할까?

 

해결

/src 폴더 안에 shims-vue.d.ts 파일을 생성 후, 해당 파일에 .vue 파일에 대한 타입을 정의해야 한다.

Vue 3

import 구문에 *.vue를 사용하면 '*.vue'라고 기입하고, 컴포넌트 명으로 import를 한다면 '*'로만 작성하자.

declare module '*' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

Vue 2

Vue 2의 경우 아래의 코드로 대체 가능하다.

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

 

 

출처

• https://vuejs.org/guide/quick-start.htm, Vue.js Docs
• vue 확장자 없는 import, sumin chae, 2017-03-27

 

Last Updated. 2023. 02. 07.