vercel에서 node v18의 지원을 중단해서 배포를 할 수 없는 상태가 되었다. 최근에 배포를 하지 않아 미리 공지를 확인하지 못했다😱
node v22로 업그레이드하면서 라이브러리 버전을 확인해야 했다.
로컬에서 먼저 확인하기
먼저 로컬에서 nvm으로 node를 버전업하고 빌드 에러를 확인했다.
nvm install v22
nvm use v22그런데... 너무 잘 됨.. 빌드 성공
npm outdated 명령어를 실행했을 때 버전업이 필요해 보이는 라이브러리가 많아 걱정했는데 바로 빌드를 성공해서 오히려 당황스러웠다.
vercel에서 확인하기
그런데!! vercel에서 node 버전 업 후 redeploy를 하니 빌드 에러 발생🚨
에러를 확인해 보니 npm install 중에 발생했는데, 로컬에서는 아무리 npm install을 다시 해봐도 에러가 나지 않았다.
vercel의 에러 로그를 gpt에게 물어봤더니 다음과 같이 알려줬는데
내용을 확인하고 나니, 얼마 전 env가 제대로 인식되지 않아 프로젝트를 삭제하고 다시 clone 한 적이 있었는데, (변경된 코드가 하나도 없는데 딱 한 개의 환경변수만 인식 되지 않았다.) 그때도 npm install 시 canvas 라이브러리 설치 문제였던 게 생각났다.
brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman python-setuptoolsnpm - canvas
gpt 말대로 canvas는 위와 같이 종속 라이브러리를 설치해 줘야 하는데, 로컬에는 설치되어 있지만 vercel의 리눅스 환경에는 설치되어 있지 않아 발생한 문제였다.
그렇게 버전업을 하려고 찾던 중 발견한 사실.. canvas를 사용하지 않는다.. DOM <canvas>를 사용하는 부분은 있는데, 라이브러리를 사용하고 있는 코드는 없었다.
그래서 다른 라이브러리에 종속된 건가 싶어 아래 명령어로 확인해 봤다.
npm ls canvas
jsdom에서 사용하고 있는데 중복으로 설치되어 있어 최종적으로 해당 의존성은 남기고 직접 설치한 canvas만 제거했다.
아마 이전에 사용하던 라이브러리가 더 이상 사용하지 않는데 제거되지 않은 모양이다.🥲
제거 후 vercel에서 확인하니 빌드 성공!
테스트하니 기능적으로도 문제가 발생하지 않아 배포했다.
수정이 필요한 부분이 있어 꼭 배포를 해야 하는 상황이었다.
그래서 최소한의 변경으로 빌드 성공 후 바로 배포했는데, 이어서 다른 라이브러리들도 버전 확인 후 업데이트를 진행해야 할 듯하다.
