process is not defined` error

🌼 process is not defined error 문제

//.env
REACT_APP_API_KEY=키 입력

//.youtubeApi.tsx
console.log("API Key:", process.env.VITE_REACT_APP_API_KEY);

원인 

VITE + React + TS에서는 환경 변수를 가져올 때 process.env.REACT_APP_API_KEY가 아닌 import.meta.env.VITE_REACT_APP_API_KEY 형식을 사용해야 한다.

해결

//.env
VITE_REACT_APP_API_KEY=키 입력

//.youtubeApi.tsx
console.log("API Key:", import.meta.env.VITE_REACT_APP_API_KEY);

 

👉Vite를 사용 중이라면 VITE_ 접두사를 사용

process 대신 import.meta 사용하여 해결

 

 

🌼 "API key": undefined 오류

원인 

.env 파일 위치

.env 파일은 프로젝트 루트 디렉터리에 있어야 한다. 만약 src 폴더 안에 넣으면 인식되지 않으므로, 프로젝트 최상위 경로에 위치한다.

=> 보통 package.json과 vite.config.js 파일이 있는 폴더가 해당

 

/react-petflix
└── petflix       루트 디렉터리
    ├── .env       
    ├── src
    │   ├── youtubeApi.tsx
    │   └── ...
    ├── vite.config.js
    └── package.json

해결

나는 파일 위치를 react-petflix에 두어서 오류가 발생했다.

이 경우 react-petflix는 petflix 프로젝트의 단순한 컨테이너 역할을 하며, Vite 설정이나 환경 변수 로드와는 무관하다. 실제로 개발 작업을 진행하는 프로젝트의 루트는 petflix 폴더이므로 여기에 둬야 한다. 

 

참고

https://velog.io/@aseungbo/0929-Uncaught-ReferenceError-process-is-not-defined-error-muw77bbz