사내 프로젝트에서 자바스크립트 패키지 매니저를 기존 npm 에서 pnpm으로 마이그레이션 하기로 하면서
발생한 에러를 공유드리려고 합니다.
문제 상황
pnpm install 후 pnpm start로 개발 서버 실행 시 ag-grid와 react-datepicker를 사용하고 있는 모든 컴포넌트에서 type 에러 발생
해결
1. ag-grid 간 버전 일치 시켜 해결
pnpm 으로 @ag-grid-community/core를 다시 설치하면서 버전을 명시하지 않았더니 가장 최신 버전으로 설치되어 생긴 문제였습니다. @ag-grid-community/core 와 @ag-grid-community/react 가 서로 다른 버전을 사용하는 경우 react 컴포넌트 내에서 ag-grid 의 API 를 호출하거나 속성을 전달할 때, TypeScript 에러가 날 수 있다고 합니다.
(from)
"@ag-grid-community/core": "^31.2.0",
"@ag-grid-community/react": "^28.2.1",
(to)
"@ag-grid-community/core": "^28.2.1",
"@ag-grid-community/react": "^28.2.1",
2. react-datepicker 의 @types/react-datepicker 다운그레이드
react-datepicker 를 사용하는 컴포넌트에서도 type 에러가 나 @types/react-datepicker 를 pnpm 으로 재설치 해주었습니다. 주의할 점은 @types/react-datepicker가 react-datepicker 보다 버전이 높을 경우 type에러를 발생시킬 수 있다고 합니다. @types/react-datepicker 역시 버전을 명시해주지 않아 가장 최신 버전으로 설치되면서 react-datepicker보다 버전이 높아져 발생한 문제였습니다.
(from)
"dependencies": {
...
"react-datepicker": "^6.1.0"
},
"devDependencies": {
...
"@types/react-datepicker": "^6.2.0"
},
(to)
"dependencies": {
...
"react-datepicker": "^6.1.0"
},
"devDependencies": {
...
"@types/react-datepicker": "^4.19.6"
},
결론
npm 과 pnpm 이 라이브러리들을 설치하고 관리하는 방법이 다른데 이번 기회에 개념을 정확이 알게 되었고 앞으로도 쭉 패키지매니저로 pnpm 을 사용하게 될 것 같습니다 :)