2023.06.04[nextjs - image type error]

📖오늘 배운  것

 

image import type error

더미데이터용 북커버 이미지를 로컬에 저장해두고 사용하는 중이다.

• 외부 링크 사용시 color-thief-react 라이브러리에서 cors 에러가 발생

이러한 이유로 로컬에 저장해두었는데(서버 연결되면 뺄 예정) 개발환경에선 괜찮은데 배포될 때 타입 에러가 발생했다!

⚠️ src/pages/index.tsx(7,20): error TS2307: Cannot find module '../../public/images/bookCover/image1.jpg' or its corresponding type declarations.

이러한 에러가 발생하였다. module을 찾을 수 없다는데…로컬에 저장되어 있는 이미지를 왜 못찾는거지?

이유는 이미지에 대한 타입이 지정되어 있지 않아서라고 한다. 그래서 types 폴더에

//image.d.ts
declare module '*.png';
declare module '*.jpg';
declare module '*.jpeg';

이렇게 모듈의 타입을 정의해주었다.

블로그 글에서는

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

 tsconfig.json 에 이것도 추가해주라고 했는데 이렇게 되면 node에 있는 @types를 못찾게 되는 것 같아서 추가하지 않고 image.d.ts 파일만 추가하였더니 성공적으로 배포되었다!

 

 

 

 

💭배운 점

외부 이미지 링크 연결해도 잘 됐으면 좋겠다...🥹🥹