TS2307: Cannot find module '.jpg' or its corresponding type declarations.

타입스크립트 사용하는 리액트 앱에서 이미지 파일을 import 하려고 했을 시에 발생하는 문제 

---

해결 방법 

- 타입스크립트를 사용해서 타입이 정의되지 않은 이미지 파일을 불러올 수가 없어서 발생하는 문제 

- 이미지 파일에 대한 타입을 추가해줘서 해결할 수 있음 

// tsconfig.json
...
"typeRoots": ["src/types"],
...

// src/types/images.d.ts
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

 

.css 파일도 마찬가지 

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

 

 

문제 해결 ! 

// 오류 없음
import mealsImage from "../../assets/meals.jpg";

 

💡 바로 연결해서 해결 하는 방법도 있음 

<Img source={require("../../assets/meals.jpg")} />

 

 

 

참고 ) https://egas.tistory.com/125

[Typescript] TS2307: Cannot find module '.png' or its corresponding type declarations.