[Vite] uncaught referenceerror process is not defined.

Vite로 프로젝트를 구축해서 진행하고 있었다. firebase api key를 감춰야해서 .env 파일을 생성하고 사용하려고 했다. process.env.변수명으로 접근하려니까 이용할 수 없다는 에러가 떴다... 왜....?

 

uncaught referenceerror process is not defined.

 

---

이유

 

Vite에서는 process.env를 사용하지 않고 import.meta.env를 사용한다.

// process.env 대신 사용
import.meta.env

그래서 다 고쳐줬더니 에러는 없는데 undefined이 떴다... 왜....?

 

기존에 .env에서 변수를 선언할 때 REACT_APP_ prefix를 붙여주는 것처럼 Vite에서는 VITE_ prefix를 붙여줘야만 인식을 하기 때문이었다.

// 선언
VITE_API_KEY = 'mykey'

// 사용
import.meta.env.VITE_API_KEY

 

Vite가 빨라서 좋은데 cra보다 정보가 적어서 에러날 때는 너무 어렵고 힘들다...🥲

 

참고1

참고2