개요
React-Native와 React를 이용해서 웹뷰 어플을 개발하고 있었다. React로 개발한 웹과 React-Native로 패키징하고 있는 두 개의 프로젝트를 기존의 멀티레포 식으로 관리하는 것보다, 하나의 레포 안에서 관리해주는 것이 효율적이라고 생각이 되어 vercel의 turborepo를 이용해 모노레포를 구성하고 있는 상황이었다.
문제 상황
vercel에서 React로 만든 웹을 배포하려고 했는데, 빌드 에러가 발생했다.
에러 메세지는 아래와 같다.
vercel 빌드 에러
에러 메세지를 해석해보니 번들러로 사용되는 Rollup 관련 패키지가 제대로 설치되지 않았다고 한다. 특히, @rollup/rollup-linux-x64-gnu에 관련된 에러가 발생하고 있었다.
로컬환경에서 빌드시에는 아무런 문제가 없이 성공했는데, vercel에서 빌드할때에는 에러가 계속되었기에, 해결책을 찾기가 조금 어려웠다.
로컬 환경에서의 빌드
원인
이 문제의 근본 원인은 npm의 의존성 관리 방식에 있었다. npm은 프로젝트의 package.json 파일에 명시된 의존성을 기반으로 패키지를 설치하지만, 때로는 특정 플랫폼 또는 아키텍처에 최적화된 패키지가 선택적 의존성으로 관리되어 자동 설치되지 않는 경우가 있다고 한다. 이 경우, 해당 환경에서만 필요로 하는 특수 패키지(@rollup/rollup-linux-x64-gnu 같은)가 설치 과정에서 누락되었던 것이 원인이었던 것 같다.
해결 과정
문제를 해결하기 위해 루트 디렉토리에 존재하는 package.json파일의 scripts에 postinstall 설정을 추가했다. postinstall는 npm install이 완료된 후 자동으로 실행되는 스크립트로, 필요한 추가 작업을 수행할 수 있다고 한다. 여기서는 Rollup과 그 플러그인들을 설치하는 명령을 추가했다. 이를 통해 모든 필수 패키지가 설치되도록 보장했다.
"postinstall": "npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs"
결론
npm 의존성 관리에서 발생할 수 있는 문제를 postinstall 스크립트를 활용하여 효과적으로 해결할 수 있었다. postinstall 스크립트는 특정 패키지의 설치를 강제함으로써, 개발 환경의 일관성을 유지하고, 예상치 못한 의존성 문제를 예방할 수 있다고 한다. 원인도 잘 모르고 몇시간을 커밋과 푸쉬를 반복하며 새벽까지 고생했는데 코드 한줄이면 해결될 문제였다니.. 조금은 허무했다ㅠㅠ 이러한 경험을 공유함으로써, 다른 개발자들이 나와 같은 문제를 마주쳤을 때 시간을 아낄 수 있도록 도움이 되었으면 좋겠다.
