Cannot find module 'png' or its corresponding type declarations.

> 이슈

Typescript 프로젝트 중 src경로로 이미지 파일을 불러올 때,

아래와 같이 React에서는 발생하지 않던 오류가 발생하는 경우가 있다.

Cannot find module 'xxx.png' or its corresponding type declarations.

타입을 정의하지 않았기 때문에 발생하는 오류이며

png 뿐만 아니라 jpg, webp, css, sass 파일 등도 등록을 해야 TypeScript에서 읽을 수 있다고 한다.

 

> 해결

declare module을 통해 오류를 해결하면 된다.

 

src/types/global.d.ts 파일 생성

// global.d.ts 
declare module "*.png";
declare module "*.jpg";
declare module "*.webp";

declare module "*.css" {
  const content: { [className: string]: string };
  export = content;
}