도승

vercel chunks error 해결 방법

현재 필자는 vercel을 통해서 프론트 배포를 사용하고 있다.

배포 플랫폼에 CI/CD도 포함되어있고, 무엇보다 preview 기능과 배포 중 문제가 생겼을 때 간단하게 redepoly를 통해서 롤백할 수 있어서 요즘은 스타트업에서도 많이 사용하고 있다.

현재 재직중인 회사도 vercel을 통해서 배포하고 있는 상황이고 말이다.

next.js 제작자가 vercel 이다보니 next 호환성과 시너지도 좋은 편이다.

다만, 가끔 예측할 수 없는 버그가 있다.

아마 대부분 해외 sass 도구를 사용하다보면 장애가 생겼을 때 helpcenter로 도움을 요청하는데 즉각적으로 도움을 받기에는 어려움이 있는 것은 마찬가지 일 것 같긴한데,

딱 나에게 그런 상황이 발생했다..

아무런 배포도 아무런 작업 변경이 없었는데 배포 시 chunks error가 다수 발생하고 있었다..

Vercel chunks error

%EA%B0%9C%EC%9D%B8_%ED%8E%98%EC%9D%B4%EC%A7%80__%EA%B3%B5%EC%9C%A0%EB%90%9C_%ED%8E%98%EC%9D%B4%EC%A7%802024-11-26_%EC%9E%A5%EC%95%A0%EB%8C%80%EC%9D%91_%EB%B3%B4%EA%B3%A0_14b371ada927805491aade5ec0ef8e32E18489E185B3E1848FE185B3E18485E185B5E186ABE18489E185A3E186BA_2024-11-25_E1848BE185A9E18492E185AE_8.29.58.png

  • 로컬에서는 정상 빌드가 되었으나 커밋이 vercel를 통해 빌드되는 도중 다량의 트러블이슈가 발생하고 있다.
  • 아마 1709개 에러가 발생하고 있다면 빌드 자체에서 장애가 발생하고 있는 것 같았다.

오류 해결을 위해 오류가 발생하기 전 예전 코드로 복구를 진행 해봤다.

git reset --hard c61c722

하였으나.. 동일한 에러가 발생하는 것이었다.

에러 로그를 살펴보니 next/vercel에서 오류가 발생하고 있었다.

아마 .next 파일에서 번들링하는 도중 오류가 발생하는 것으로 추측하고 있었다.

next 파일을 포함해 .vercel까지 모두 지우고 pnpm install 을 통해 package.json에 있는 모든 파일을 재설치를 진행하고 로컬 빌드를 실행했을 때 로컬에서는 정상 빌드가 되었으나 배포중 에러가 올라오는 것이였다.

당연히 pnpm build , vercel —prod —force 등 로컬에서 시도할 수 있는 방법은 다 해봤던 것 같았다.

[환경 변수]

  • 본인 또는 다른 누군가 실수로 Vercel Environment Variables 을 수정 했다는 가정하에 기존 로컬 .env와 비교도해 봤다. 물론 validation 때문에 1709개나 되는 에러가 발생할리는 없지만 말이다..
  • vercel env pull 을 통해 비교하였지만 라이브 배포하는 키값을 제외하고 다른 부분은 없었다.
  • 무엇보다 (NEXT_PUBLIC_에 대한 누락은 없었다)

[해결]

cat .next/server/chunks/8679.js 을 통해 로그를 분석해본 결과 해당 에러는 휴먼 에러가 아닌 vercel

시스템 변경에 의한 버그가 생긴 것을 인지하게 되었다.

즉 node 22 버전이 릴리즈된 이후 라이브되고 있는 프로덕트를 제외하고 모든 프로젝트에서 장애가 발생한 것.

package.json 파일에 기재되어있는 node”: “>=20.18.0 엔진 명령어로 인해 노드 패키지는 최신 버전이 유지가 된다.

추가로 vercel에서 20.x 로 유지가 되는 별도 옵션이 있다.

%EA%B0%9C%EC%9D%B8_%ED%8E%98%EC%9D%B4%EC%A7%80__%EA%B3%B5%EC%9C%A0%EB%90%9C_%ED%8E%98%EC%9D%B4%EC%A7%802024-11-26_%EC%9E%A5%EC%95%A0%EB%8C%80%EC%9D%91_%EB%B3%B4%EA%B3%A0_14b371ada927805491aade5ec0ef8e32E18489E185B3E1848FE185B3E18485E185B5E186ABE18489E185A3E186BA_2024-11-27_E1848BE185A9E1848CE185A5E186AB_11.29.19.png

노트 22 버전이 릴리즈 된 이후부터 engines에 기재된 노드버전과 편의를 위해 vercel에서 지정된 옵션이 충돌이 발생하고 있다는 것을 확인하였다.

{  "name": "your-project",  "version": "0.1.0",  "private": true,  "engines": {    "pnpm": ">=9.4.0"  },

위 node version을 업데이트한 이후부터는 vercel에서도 정상 빌드가 되었다.

물론 로컬에서 노드 버전이 변경이 필요할 경우 다시 기재가 필요할 것 같다.

(현재는 node_modules에 기존 버전이 설치가 되어있기 때문에 당장은 필요 없다.)

누군가 실수로 npm 패키지 하나만 잘못 건들여도 인터넷이 망한다고 했을 때 웃어 넘겼었는데,

웃어 넘길일이 아니였다.

의견 남기기

이 글에 대한 의견이나 질문이 있으시다면 언제든 연락주세요!