Webpack과 Babel을 직접 세팅해 프로젝트를 진행하던 도중 위와 같은 에러를 만나게 되었습니다.
분명 file-loader도 설치했고 test속성 값을 정확하게 입력했는데 왜 이미지 파일을 찾지 못할까? 라는 생각에 구글링을 해보던 도중 이는 TS에서 이미지 파일을 읽지 못하는 현상으로 tsconfig에서 별도 세팅이 필요하다는것을 알게 되었습니다.
먼저 src내의 types라는 디렉토리를 만들어 image.d.ts라는 파일을 생성해주고 사용하고자 하는 파일의 확장자를 포함해 아래와 같이 입력합니다.
d.ts파일은 TS가 특정 파일이나 타입을 인식하지 못할 때 인식하도록 도와주는 역할을 합니다.
- image.d.ts
declare module '*.jpg';
declare module '*.jpeg';
declare module '*.png';
declare module '*.gif';이후 tsconfig.json의 typeRoots속성의 값에 해당 디렉토리를 추가해줍니다.
- tsconfig.json
"typeRoots": ["node_modules/@types", "src/types"],이렇게 설정해주면 이제 에러없이 정상적으로 잘 찾아오는것을 확인할 수 있습니다.
