Nest, Yarn Berry + WebStorm에서 라이브러리 Not Found 해결 방법

Nest로 블로그 백엔드를 열심히 만들고 있었다.

라이브러리들이 다 not found가 떠서 굉장히 당황을 했다.

일단 실행을 해보니까 서비스가 잘 돌아갔다. 원인은 바로 yarn berry로 설정했기 때문이다.

원인

• Yarn Berry 환경에서 "Not Found" 에러가 떴던 이유는, Yarn Berry가 기존의 node_modules 폴더를 사용하는 방식과 완전히 다르게 작동하기 때문
• 웹스톰(IDE)은 node_modules 폴더를 기준으로 라이브러리를 찾도록 설계되었는데, Yarn Berry는 그 폴더를 만들지 않으니 IDE 입장에서는 "라이브러리가 설치되지 않았다"고 착각함
• "코드는 잘 돌아가는데, 왜 IDE에서만 오류가 났는가?"
  • 실행 환경 (Node.js)
    • 터미널에서 yarn start로 프로젝트를 실행하면, Yarn이 Node.js를 실행시키면서 .pnp.cjs라는 "지도"를 함께 건네줌
    • Node.js는 이 지도를 보고 라이브러리들을 아무 문제 없이 찾아냄
  • 개발 환경 (WebStorm)
    • 웹스톰은 이 "지도"의 존재를 모름
    • 웹스톰은 여전히 옛날 방식대로 node_modules 폴더를 찾아 헤매고 있음
    • 폴더가 없으니 당연히 라이브러리를 "찾을 수 없다(not found)"고 판단하고 빨간 줄을 그었던 것

해결 방법

STEP 1: Yarn PnP SDK 설치

yarn dlx @yarnpkg/sdks vscode

• 이 명령어는 프로젝트 루트에 .yarn/sdks 폴더를 생성한다.
• 이 폴더 안에는 웹스톰이 TypeScript와 ESLint를 올바르게 인식하는 데 필요한 파일들이 들어있다.

STEP 2: 웹스톰의 TypeScript 경로 설정

• TypeScript 설정 메뉴로 이동
• Languages & Frameworks > TypeScript

"~/Desktop/BlogServer-Nest/.yarn/sdks/typescript" 이미지에는 이렇게 보인다.

하지만 나는 처음에 이렇게 넣었을 때, 잘못된 경로라고 떠서 매우 당황스러웠다.

/Users/{USER}/Desktop/BlogServer-Nest/.yarn/sdks/typescript/lib

그래서 직접 파일 경로를 찾아가서 이거를 저 경로 부분에 넣었더니 설정이 제대로 되었다.