문제가 발생한 배경

패키지 매니저에 대해 공부하고 Yarn PnP를 적용하는 과정에서 의존성 설치는 다 끝났지만 모듈을 찾지 못한다는 ts 에러가 발생하고 있다.

---

문제의 원인 알아보기

원래는 import React만 입력해도 아래 사진과 같이 자동 완성이 나오는데 그것조차 나오지 않아 내가 직접 작성을 했었다.

그렇다면 실제로 의존성이 제대로 설치되어 있는지 확인을 해봐야할 것 같다...!

// package.json 파일 
{
  "name": "yarn-template",
  "packageManager": "yarn@4.3.1",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.2.4",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20.14.9",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.5.2"
  }
}

.pnp.cjs 파일에도 의존성이 잘 설치되어 있고, 개발 모드로 실행, 빌드 테스트 모두 정상적으로 작동은 한다...

Yarn 공식문서 에디터 SDK를 읽어보면 스마트 IDE(VScode, IntelliJ 등)은 Plug'n'Play 설치를 사용할 때 TypeScript가 작동하려면 특별한 구성이 필요하다고 나와있다.

🔎 더 깊게 알아보기

왜 PnP 방식에서는 TypeScript를 사용할 때 SDK가 추가적으로 필요할까?

Yarn PnP(Plug-and-Play) 방식에서는 모듈이 프로젝트 폴더 내에 직접 설치되지 않고, 대신 중앙 캐시 위치에 설치된다.

이렇게 하면 모듈 간의 의존성 관리가 더 효율적이지만, 일부 IDE 확장 프로그램들이 이 방식을 인식하지 못하는 문제가 발생할 수 있다.

예를 들어, Prettier, TypeScript와 같은 도구들은 모듈을 직접 찾아서 실행하려 하지만, Yarn PnP 방식에서는 모듈이 다른 위치에 있기 때문에 실행에 실패할 수 있다.

이를 해결하기 위해 SDK를 통해 Yarn PnP 방식과 IDE 확장 프로그램 사이의 연결 고리 역할을 하는 것이다.

Yarn PnP SDK는 어떤 방식으로 동작하길래 이러한 문제를 해결해 주는걸까?

1. 간접 패키지 생성

• SDK는 실제 패키지들을 감싸는 간접 패키지를 생성한다.

• 이 간접 패키지는 실제 패키지를 호출하기 전에 Yarn PnP 로더를 자동으로 설정한다.
  

2. Yarn PnP 로더 설정

• Yarn PnP는 Node.js 런타임 내에서 삽입되는 특별한 로더를 사용한다.

• 간접 패키지는 이 로더를 사용하여 실제 패키지를 찾고 로드할 수 있게 한다.
  

3. IDE 확장 프로그램 지원

• 많은 IDE 확장 프로그램들은 자신이 래핑한 패키지(Prettier, TypeScript 등)를 실행할 때 Yarn PnP를 고려하지 않는다.
  
• SDK는 이러한 확장 프로그램들이 Yarn PnP 방식을 인식하고 올바르게 실행할 수 있도록 지원한다.

---

문제 해결 방법

이제 Yarn PnP에서 SDK가 왜 필요한지, 어떤 방식으로 동작해서 문제를 해결해 주는지 알았으니 적용 할 차례이다!

1. VSCode Extension에서 ZipFS - a zip file system 설치하기(아래 사진 처럼 생긴 것 설치)

2. 명령어 실행하기(실행 하면 .vscode/settings.json 파일이 생성된다)

yarn dlx @yarnpkg/sdks vscode

3. VSCode에서 사용자 정의 TS 설정 활성화 하기

• Ctrl + Shift + P 눌러서 VSCode 설정 열기

• Select TypeScript Version 입력해서 클릭하기

• Use Workspace Version or 작업 영역 버전 사용 클릭하기

🔥 하지만 나는 설정 중에 Use Workspace Version or 작업 영역 버전 사용 이 옵션이 나오지 않았다...

다른 분들의 블로그를 보고 여러 해결 방법을 찾았다!

추가 해결 방법

Select TypeScript Version 항목이 나오지 않는 경우

• 사진과 같이 아무 파일도 열지 않고 Select TypeScript Version 입력해도 저 항목이 나오지 않으니 .pnp.cjs같은 아무 파일을 클릭하고 Select TypeScript Version 입력을 해야한다.
  

Use Workspace Version or 작업 영역 버전 사용 이런 옵션이 나오지 않는 경우

• 폴더 구조 확인하기, 나는 playground라는 여러 프로젝트 폴더가 있는 곳에서 VSCode를 실행했다 하지만 이렇게 되면 VSCode에서 어떤 폴더에서 Yarn Berry PnP 구성을 사용해야 할 지 알 수 없기 때문에 옵션이 나오지 않는다고 한다.
  ➔ Yarn PnP가 구성되어 있는 폴더를 직접 열기

playground라는 여러 프로젝트 폴더가 있는 곳에서 VSCode를 실행한 경우 나오지 않는다.

Yarn PnP가 구성되어 있는 폴더로 VSCode를 실행하니깐 옵션이 정상적으로 나온다!

playground라는 여러 프로젝트 폴더가 있는 곳에서 VSCode를 켜도 에러가 발생하지 않는 방법은 아직 못찾았다... 아시는 분은 댓글로 알려주시면 감사하겠습니다...!

---

이제는 에러가 생기지 않고 정상적으로 모듈을 인식한다!

💡 단순히 해결 방법을 도입하는 것이 아니라 왜라는 질문을 던지고 근거를 찾는 사고 방식으로 문제를 해결하다 보니깐 기존보다 조금 더 깊게 공부할 수 있는 것 같아서 좋은 것 같다!

---

🙃 도움이 되었던 자료들

Yarn 공식 문서
yarn berry에서의 cannot find module 에러 해결
yarn berry vscode module 못찾는 문제에 대해