Vite로 빌드한 React 앱에서 'process is not defined' 에러가 납니다

Question

안녕하세요. CRA에서 Vite로 마이그레이션 중인데, npm run dev는 문제없이 돌아가는데 npm run build 후 preview나 Nginx 배포하면 콘솔에 이 에러가 떠요.
Uncaught ReferenceError: process is not defined
    at index-abc123.js:1:345
문제가 되는 코드는 이런 식입니다.
// src/config.ts
export const API_URL = process.env.REACT_APP_API_URL || "http://localhost:4000";

김영삼 · Accepted Answer

Vite는 CRA와 환경 변수 주입 방식이 완전히 다릅니다. 두 가지를 동시에 바꾸셔야 해요.
1) env 이름 접두사
Vite에서 클라이언트 번들에 노출되는 변수는 VITE_로 시작해야 합니다. REACT_APP_ 은 무시됩니다.
# .env
VITE_API_URL=https://api.example.com
2) 코드에서 참조 방식
Vite는 process.env를 제공하지 않습니다. import.meta.env를 쓰세요.
export const API_URL = import.meta.env.VITE_API_URL ?? "http://localhost:4000";
3) 서드파티 라이브러리가 process.env를 쓴다면
일부 노드용 라이브러리가 번들에 섞이면 같은 에러가 재발합니다. 임시방편으로 vite.config.ts에 아래를 넣으면 런타임 에러는 막을 수 있지만, 근본적으로는 브라우저용 대체 라이브러리를 쓰는 게 맞습니다.
// vite.config.ts
export defa

프론트수진 · Answer

저도 CRA → Vite 옮길 때 똑같이 겪었어요. 특히 jsonwebtoken이나 buffer 같은 노드 전용 모듈 쓰는 라이브러리가 묻어 들어가면 define만으론 안 잡히고 vite-plugin-node-polyfills가 필요하더라고요. 한 번 그 단계까지 가면 번들 사이즈 체크도 꼭 해보세요.

주니어개발자소연 · Answer

import.meta.env.VITE_API_URL로 바꾸니 바로 해결됐습니다. 감사합니다!
추가 질문이 하나 있는데, .env.local, .env.production, .env가 있을 때 우선순위는 어떻게 되나요? 프로덕션 빌드에서 어떤 게 먼저 적용되는지 헷갈려요.

댓글 0