2024-04-22 TIL

vercel 배포 시 발생한 에러 상황에 대한 원인분석 및 해결방법

배포 시 겪었던 문제

하단처럼 vercel 배포 시, 빌드 상황에서 라이브러리들을 찾을 수 없다는 오류가 발생, 로컬에서 개발 시에는 해당 이슈가 없었음

 

해결과정

1. 로컬에서 next build 시, props에 타입을 주지 않은 부분들에서 에러 발생하여 해결해서 푸시 -> 해결되지 않음
2. npm과 yarn 충돌이라 판단하여 package-lock.json 파일 삭제 -> 해결 안됨
3. package.json 확인해보니 clsx, next-themes 라이브러리가 dependencies에 명시되어 있지 않아서 설치 후 푸시 -> 해당 에러는 해결
4. 이후 tailwindcss-animate 도 dependencies에 명시되어있지 않아서 설치 후 푸시 -> 배포 성공

문제 원인

원인은 해당 프로젝트 초기 세팅 시, tailwind.config.ts, utils.ts, theme-provider.tsx 파일만 강의 레포에서 가져오고, pakcage.json 파일은 기본 npx로 설치한 것을 사용했기 때문에 dependencies에 라이브러리가 추가되어있지 않아 import가 안되어 있었음. 실제 로컬에서 run dev로는 잘 작동했지만, run build 시 에러가 났고, vercel 배포 시에는 build를 먼저 진행하고 서버를 실행시키기 때문에, 로컬에서는 오류가 발생하지 않았고, vercel 환경에서는 오류를 발생시켰음

 

실제로 package.json에서 문제있던 3개의 라이브러리 삭제 후, node_modules를 삭제하고 다시 yarn install 후, 빌드했을 때 vercel에서 배포했을 때와 같은 에러를 발생시켰음

느낀 점

에러 내용을 보고, 라이브러리를 찾을 수 없다고 인식했으면 바로 package.json 부터 열어볼 수 있지 않았나 싶은데, 이와 같은 맥락으로 build를 따로 하지 않는 로컬과 build를 진행하는 vercel 환경의 차이를 알고 build 진행 후, props에 대한 타입지정을 한 후에 vercel 환경에서와 같은 에러를 재현할 수 있었기 때문에 좀 더 빠르게 이슈를 해결 할 수 있었던 것 같다.

 

여러 디바이스나 환경에서 개발환경을 일치시키는 것에 대한 중요성을 깨닫게 되었다.