Parcel의 Cannot find module './style.module.scss' or its corresponding type declarations. 에러

■ 상황

parcel로 번들링한 타입스크립트 프로젝트에서 css modules를 사용하기 위해 파일을 만들고 import를 했는데

'Cannot find module './style.module.scss' or its corresponding type declarations.' 라는 ts 에러가 발생하면서

타입스크립트가 css 모듈을 찾지 못하는 상황이 발생했다.

 

■ 상세

parcel에는 css 모듈 기능이 기본으로 탑재되어 있지만, 타입스크립트는 이를 알지 못하기 때문에

parcel.d.ts 파일에 모듈의 타입을 선언하여 타입스크립트에게 알려주도록 하자.

// parcel.d.ts
declare module '*.module.scss' {
  const value: Record<string, string>;
  export default value;
}

역시나 ts 파일이므로 tsconfig.json 파일의 include에 'parcel.d.ts'를 추가해준다.

 

■ 비고

parcel이 css 모듈도 default로 지원해준다는 걸 이번에 알았다.

 

참고

https://issueexplorer.com/issue/parcel-bundler/parcel/7231

https://parceljs.org/features/dependency-resolution/#typescript