[TS] 타입스크립트 png파일 import Cannot find module

타입스크립트에서 png 같은 로컬 파일 받아올 때 모듈을 찾을 수 없다며 아래와 같은 에러가 뜰경우 

Cannot find module '' or its corresponding type declarations.

왜 발생하는가?

타입스크립트에서 기본적으로 import 해올 수 있는 파일은 확장자가 .ts .tsx .d.ts 인 경우이다.( 정적인 에셋 가져오기를 유효한 모듈로 인식하지 않음 )

따라서 확장자가 .png 혹은 .jpg 같은 파일을 import해오면 찾을 수 없다는 에러가 발생한다. 자세한 내용은 module resolution

 

해결 방법

1. 

프로젝트 폴더 ( ex. src ) 에 types 폴더를 생성해 주고, index.d.ts 파일을 만든다.

생성한 파일에 

declare module '*.png' {
  const path: string;
  export default path;
}

jpg 같은 기타 확장자도 png 대신 '*.jpg' 로 declare module을 추가해 주면 된다.

 

2.

Vite를 사용한다면, 마찬가지 프로젝트 폴더에 vite-envd.ts 파일을 생성해주고

/// <reference types="vite/client" />

슬러쉬 세 개를 포함해 위 코드를 써주면 된다. 자세한 내용은 vite 공식문서의 에셋 가져오기 에서 확인할 수 있다.