빌드 시 에러가 나는 경우, minify 옵션을 꺼보자.

개발환경에서 프론트엔드 앱을 구축하고, 빌드해보면 예상치 못한 에러들이 발생하곤 한다.

 

타입스크립트를 사용하여 컴파일 시점에 최대한 에러를 검출하려 해도 외부 라이브러리 등에서 런타임 에러가 발생할 수도 있다.

예컨대, 개발이냐 프로덕션이냐 개발환경에 따라 생성되는 코드가 꼭 같다고 말할 수는 없다.

 

보통 빌드 시 minify를 통해 파일의 용량을 줄여주는데, 이때 코드가 난독화되기 때문에 에러가 발생한 구문을 보아도

이게 정확히 어떤 코드인지 구분이 어렵다.

콘솔에 띄워진 에러로그

 

에러가 난 구문

 

이럴 때는 minify 옵션을 끄고 빌드해보면 에러가 난 곳을 쉽게 찾을 수 있다.

vite react의 빌드 명령어는 tsc && vite build다.

vite build --minify false로 빌드한 후 다시 에러로그를 확인해보자

 

에러로그

 

에러가 난 구문

 

minify 옵션을 끄니 훨씬 코드를 알아보기가 편해졌다.

개발 모드에서 잘 돌아가던 코드가 빌드 시 런타임 에러를 뱉는다면,

minify 옵션을 끄고 디버깅해보도록 하자.