Uncaught ReferenceError: process is not defined

작업 상태

- 기존에 react에서 사용하던 코드를 vite사용 환경으로 포팅하던중 .env 에서 설정한 변수 사용중 발생했습니다.

- react만 사용할때는 정상 작동했던 코드입니다.

 

.env

REACT_APP_LOG_LEVEL=debug

  

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL; //에러가 발생한 장소 입니다

에러 메시지 

Uncaught ReferenceError: process is not defined

원인

- vite 쪽 환경으로 이동하면서 발생한 문제였습니다.

처리

-  vite 에서 환경변수 관리하는 형태로 변경합니다.

- vite 쪽에서 VITE_ prefix 사용을 권장합니다.

const apiLogLevel = import.meta.env.VITE_APP_LOG_LEVEL;

 

.env

VITE_APP_LOG_LEVEL=debug

 

또는

npm install dotenv 이후 

import dotenv from 'dotenv';

dotenv.config();

로 하면 동작하기는 합니다.

 

참고

--------------------------React

React에서 .env 환경 변수를 사용하기 위해서는 몇 가지 조건이 있습니다.

환경 변수 이름은 반드시 REACT_APP_으로 시작해야 합니다.
환경 변수는 프로젝트 루트 디렉토리에 위치한 .env 파일에 선언해야 합니다.
위 두 가지 조건을 만족하면, React 애플리케이션에서 process.env.REACT_APP_ 접두어를 사용하여 .env 파일에 선언된 환경 변수에 접근할 수 있습니다.

 

.env 파일명 

<projectroot>/.env
REACT_APP_LOG_LEVEL=debug

 

react.js에서 사용예시

const apiLogLevel = process.env.REACT_APP_LOG_LEVEL;

 

--------------------------Vite

Vite에서 .env 환경 변수를 사용하기 위해서는 다음과 같은 방법을 사용할 수 있습니다.

.env 파일을 프로젝트 루트 디렉토리에 위치시킵니다.
.env 파일에서 사용할 환경 변수를 선언합니다. 변수 이름은 VITE_으로 시작해야 합니다.

 

/.env
VITE_APP_LOG_LEVEL=debug

 

vite 환경에서 사용예시

const apiUrl = import.meta.env.VITE_APP_LOG_LEVEL;

 

주의할점은, Vite에서는 .env.local, .env.development, .env.production과 같은 환경 변수 파일도 지원합니다. 이러한 파일을 사용하면, 개발 환경과 프로덕션 환경에서 각각 다른 환경 변수 값을 설정할 수 있습니다.

 

보통은 참조할점인데. react에서 이동하는 상황이어서  .env, .env.development, .env.production 이 세개의 파일이 존재했는데, vite에서는 설정값에 따라 알아서 다른 환경변수 파일을 불러옵니다.

 

Vite의 환경 변수와 모드 | Vite (vitejs-kr.github.io)

Vite