Skip to content

Commit fe66d87

Browse files
authored
docs(bundling): add instructions to fix TypeScript errors when importing images (#380)
1 parent 03f3709 commit fe66d87

File tree

1 file changed

+20
-1
lines changed
  • fundamentals/bundling/webpack-tutorial

1 file changed

+20
-1
lines changed

fundamentals/bundling/webpack-tutorial/assets.md

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ module.exports = {
4242
`App.tsx`에서 logo 파일을 import하고 로고 이미지 태그 `src`에 넣어주세요.
4343

4444
```tsx
45-
// logo.svg 를 import로 가져옴 (타입에러는 일단 무시해주세요)
45+
// logo.svg 를 import로 가져옴
4646
import logo from "./assets/logo.svg";
4747

4848
// 가져온 logo 모듈을 src에 넣어줌
@@ -55,6 +55,25 @@ import logo from "./assets/logo.svg";
5555
npm run build
5656
```
5757

58+
::: details Q: 이미지 파일 import 시 타입에러가 발생한다면 어떻게 해결하나요?
59+
60+
만약 아래와 같은 에러가 발생한다면,
61+
62+
`Cannot find module './assets/logo.svg' or its corresponding type declarations.`
63+
64+
이는 TypeScript가 이미지 파일을 모듈로 인식하지 못해서 발생하는 문제예요.
65+
66+
`src/global.d.ts` 파일을 생성하고 아래 내용을 추가해 주세요.
67+
68+
```ts
69+
declare module "*.png";
70+
declare module "*.jpg";
71+
declare module "*.svg";
72+
```
73+
74+
이렇게 하면 `.png`, `.jpg`, `.svg` 같은 이미지 파일을 TypeScript에서 정상적으로 import할 수 있어요.
75+
:::
76+
5877
## CSS에서 이미지와 폰트 사용하기
5978

6079
폰트 파일도 같은 방식으로 사용할 수 있어요. 먼저 `index.html`에서 폰트 파일을 지워주세요.

0 commit comments

Comments
 (0)