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

webpack에서 이미지도 번들링 해주려고, 아래와 같이 설정을 해주니 typescript 쪽에서 해당 에러가 발생했다.

// webpack.config.js
...
      {
        test: /\.(png|jpe?g)$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[path][name].[ext]',
          },
        },
      },
...

 

 

TS2307: Cannot find module './webpack.png' or its corresponding type declarations.

 

원인은 타입이 정의되어 있지 않아서 이다. Typescript에서 .d.ts 파일을 추가해줘서 타입을 추가할 수 있다. (단, index.d.ts 파일은 index.ts 파일이 생성했다고 Typescript가 추측해서 무시된다. 따라서 images.d.ts 와같이 다른 이름을 지어주자!)

 

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

 

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

 

사진이 잘 출력되었다!

---

오.. 원래는 path를 못찾아서 빨간줄이 떴는데, 잘 찾아준다!

 

 

https://stackoverflow.com/questions/52759220/importing-images-in-typescript-react-cannot-find-module

Importing images in TypeScript React - "Cannot find module"