[09/29] `Uncaught ReferenceError: process is not defined` error

문제

// .env
REACT_APP_GA_TRACKING_ID=yourId

// .ts
const gaTrackingId = process.env.REACT_APP_GA_TRACKING_ID; // 에러 발생
console.log(gaTrackingId);

• 이전 [react-ga] gaTrackingId is required in initialize() error에서 환경 변수 문제를 해결했다 생각했지만, VITE + React + TS로 생성한 프로젝트에서 process is not defined error 문제가 발생하였다.

원인

• VITE + React + TS에서는 proces 대신 import.meta.env를 사용해 .env 환경 변수를 가져오기 때문.
• create-react-app으로 생성한 프로젝트에서 동일한 문제가 발생한다면 하단 방법 참고

해결

// .env
VITE_APP_GA_TRACKING_ID=yourId
DB_PASSWD=1234

// .ts
const gaTrackingId = import.meta.env.VITE_APP_GA_TRACKING_ID;
console.log(gaTrackingId); // yourId

const dbPasswd = import.meta.env.DB_PASSWD;
console.log(dbPasswd); // undefined

• process 대신 import.meta 사용하여 해결
• Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타낸다.

참고

• https://vitejs.dev/guide/env-and-mode.html
• https://github.com/vitejs/vite/issues/1973

create-react-app 해결 방법

create-react-app으로 생성된 React 프로젝트라면 하단의 링크를 참고

• https://bobbyhadz.com/blog/react-referenceerror-process-not-defined
• https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined