Next.js, Typescript 환경에서 라이브러리 “모듈에 대한 선언 파일을 찾을 수 없습니다” 에러

Next.js와 Typescript 환경에서 “모듈에 대한 선언 파일을 찾을 수 없습니다” 라는 에러가 발생하였습니다. 그리고 이 문제를 해결하는 방법을 소개하려고 합니다.

1️⃣ 사용하고자 하는 해당 라이브러리가 TS를 지원하는지 확인하자

우선적으로 살펴봐야 하는 것입니다. 옛날 라이브러리 같은 경우 pure esm.js파일만 가지고 있고 타입설정을 따로 해놓지 않는 경우가 있을 수 있습니다. 이런 경우에는

 @node_modules/@types/<해당 라이브러리 이름>/index.d.ts 

파일을 생성하여 직접 작성해주어야 합니다.

 

제가 사용하고자 하는 use-sound는 업데이트 한지 꽤 되긴 했지만, TS를 지원하는 라이브러리입니다.

2️⃣ TS를 지원한다면 npm의 @types/<해당 라이브러리> 를 확인하자

 npm i -D @types/<라이브러리 이름>  을 실행하여 type이 존재하는지 확인하고 설치할 수 있습니다. 아니면 npm 홈페이지에서 확인하실 수 있습니다.

제가 사용하고자 하는 use-sound 타입 패키지는 없는 것으로 확인되었습니다.

3️⃣ TS를 지원한는데 @types가 없다면, 내부 파일을 확인하자

라이브러리 내부 파일을 보면 index.d.ts 파일이 있습니다. 예전 next.js 환경이었다면 이를 감지하고 타입설정을 하지만, nex.js 패치가 되고 나서 이를 감지하지 않더라구요. (이유는 잘 모르겠습니다..)

✨첫 번째 해결방법

 @node_modules/@types/<해당 라이브러리 이름>/index.d.ts  파일을 만들어  @node_modules/<해당 라이브러리>/index.d.ts  파일을 복사하여 붙여넣어 줍시다. 그러면 자동으로 타입을 감지하여 에러가 해결되게 됩니다.

✨두 번째 해결방법

next.js의 설정을 바꿔주는 방법입니다.

루트 디렉토리의 tsconfig.json 파일에서 아래 코드를 다음과 같이 바꿔줍니다.

"moduleResolution": "Bundler",
->
"moduleResolution": "Node",

패치 이전 버전의 next.js에서는 "moduleResolution" 의 값이 bundler, node 였는데, 패치 이후 어떠한 수정이 있는 것 같습니다.

저는 패치된 이유를 잘 모르기 때문에 두 해결 방법중 첫 번째 해결방법을 사용했습니다.

오류 사라짐.👍

❗결론

이 오류를 해결하면서 타입에 대한 이해도가 조금 더 늘어난 것 같습니다. Next.js처럼 업데이트가 빠른 프레임워크를 사용하는데 있어서 끊임없는 학습이 정말 중요하다고 또 새삼 느끼네요. 아무튼 에러를 해결해서 편안합니다😊