Vite + React 환경변수 사용시 process is not defined 에러

문제 발생 상황

Vite + React로 개발환경을 세팅한 프로젝트에서 환경변수를 작성하다 해당 오류가 발생했습니다.

서버 API URL을 환경변수로 지정해주려 하는데 이 값은 외부에 노출이 되면 안되기 때문에 .env파일에 따로 작성하고 상수로 작성해 사용하기로 했습니다.

.env 파일에 값을 작성 후 사용하기 위해 process.env.value로 접근했더니 에러가 발생했습니다.

const API = {
  URL: process.env.REACT_APP_API_URL,
};

export default API;

문제 발생 원인

구글링을 통해 원인을 알 수 있었는데 vite를 사용한 프로젝트에서는 번들러가 환경변수를 가져올 때 process 대신에 import.meta를 통해 환경변수를 가져오기 때문에 해당 오류가 발생한다고 합니다.

문제 해결

process.env에서 import.meta.env로 수정하고 환경변수를 가져와 해결할 수 있었습니다.

const API = {
  URL: import.meta.env.REACT_APP_API_URL,
};

export default API;

추가

process is not defined 에러를 해결하고 나니 환경변수가 undefined인 문제가 발생했습니다. 문제를 해결하기 위해 다방면으로 알아보니 환경변수를 작성할 때 아래 규칙을 따라야 한다고 합니다.

1. 값을 홑 따옴표(’’), 쌍 따옴표(””)를 사용하여 감싸지 않기
2. 줄 끝 세미콜론(;)이나 콤마(,) 사용하지 않기
3. .env 파일은 최상위 루트 폴더에 위치

저는 환경변수를 모든 규칙을 따라 잘 작성했지만 여전히 환경변수를 참조하면 undefined가 반환되었습니다.

만약 개발환경 서버(localhost)가 구동되는 중에 환경변수를 작성했다면 서버를 재구동 한 이후 확인해봅시다.

해결

공식문서를 찾아보니 환경변수의 접두사를 REACT_APP이 아닌 VITE_로 작성해주어야 정상적으로 환경변수를 사용할 수 있다고 합니다.