[React, Vite] 개발 모드에서는 되고 배포하면 에러 날 때

[React, Vite] 개발 모드에서는 되고 배포하면 에러 날 때

 

React + Vite + TypeScript 프로젝트를 하다 에러가 발생했다.

로컬에서는 화면이 정상적으로 나왔는데 배포한 사이트에서는 빈 화면만 떴다.

에러 메시지는 다음과 같았다.

create-react-app, vite 등에서 제공하는 build 기능은 코드를 경량화 및 난독화해 준다.

따라서 'ao'라는 식별자가 무엇인지 알아볼 수 없다.

개발 모드에서는 잘 실행되었으므로 build 한 결과물에 에러가 있을 것이다.

어느 부분에서 에러가 났는지 확인하기 위해 minify 옵션을 꺼야 한다.

vite.config.ts 파일에서 build: { minify: false } 를 추가해주자.

build를 실행한 뒤, index.html 파일을 열어본다.

그러면 다음과 같이 변수명이 코드에서 작성한 그대로 나타난다.

URL이라는 변수에 문제가 있음을 확인할 수 있다.

 

에러가 난 코드의 상태는 위와 같다.

URL을 컴포넌트 바깥에서 선언한 후, url을 사용하는 컴포넌트에 URL을 전달해주었다.

이미 자바스크립트에서 URL이라는 api가 정의되어 있는데 이를 다시 선언해 에러가 발생한 것이다. (ref)

실제로 브라우저 콘솔 창에서 window.URL을 입력하면 이미 함수가 지정되어 있음을 확인할 수 있다.

window.URL

두 가지 방법으로 문제를 해결할 수 있었다.

(1) URL 변수 선언을 컴포넌트 내로 옮기거나, (2) 변수명을 바꾸면 된다.

 

---

References

https://vitejs.dev/config/build-options.html#build-minify

https://developer.mozilla.org/ko/docs/Web/API/URL