[React/Vite] 에러해결: Vite 프로젝트 .env 환경변수는 process.env => import.meta.env로 써주기

배운 대로 .env 파일을 통해 환경 변수 설정을 하고 ..

깃헙에 그냥 올라가는 바람에 .gitignore 설정도 구글링을 통해 해서 해결!

 

근데 이번에는 환경변수를 가져오는데

배운대로 process.env .. 이렇게 가져오는데 에러가 났다. 

페이지는 흰화면만 뜨고..  😭

자꾸 process is not defined 라고 콘솔창에 떴다. 

 

하지만 환경변수 가져올때 process.env. . 맞는데?! 

다음과 같이 코드를 썼는데-   

(.env파일에서는 REACT_APP_SERVER_URL = http://... 맞게 써줌) 
(참고로 " " 쌍따옴표는 원래 안넣는 것으로 알지만, 쌍따옴표를 써도 문제 없이 잘 떴다)

import axios from "axios";

const commentClient = axios.create({
	baseURL: process.env.REACT_APP_SERVER_URL,  // 이 부분!
	headers: {
		"Content-Type": "application/json",
	},
});

잘 몰랐던 나는 ㅠ^ㅠ 다시 확인해봤고..

 

 

 

간과한 점이 있었는데,

강의에선 CRA 프로젝트로 진행했고, 나는 (빠르다는) Vite으로 프로젝트를 만든 것이라는 점 !!

(생각해보면 은근 vite 쓰면서 cra와 차이가 날 때가 있어서 배운 것과 다르게 적용시켜줘야할 때가 꽤나 있다)

 

 

 

구글링을 해보니,  바로 찾지는 못했지만 

감사하게도 ㅠㅠ 다음의 글을 보게되었다.

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

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

 

cra 프로젝트에서도 위와 같은 문제가 생길 때도 있지만,

vite 프로젝트에서 이런 에러가 생기는 경우, cra에서 쓰는 process.env 가 아니라 다르게 가져와야 하기 때문이라는 점.

VITE (+ React + TS) 프로젝트에서는, import.meta.env를 사용해 환경변수를 가져와야 한다고 되어있음 !

 

 

 

그래서 다음과 같이 바꿔서 환경변수를 가져왔더니 해결되었다 ;)

baseURL: import.meta.env.REACT_APP_SERVER_URL, -> 라고 쓰면 안됩니다 !!!
baseURL: import.meta.env.VITE_APP_SERVER_URL,  =>  환경변수명 VITE_로 시작해야합니다

 

 

 

 

+ 2.22 수정

https://ko.vitejs.dev/guide/env-and-mode.html

vite 공식문서에서도 확인 가능!

Vite는 import.meta.env 객체를 이용해 환경 변수에 접근할 수 있도록 하고 있으며, 아래와 같은 환경 변수에 접근이 가능합니다.

Vite

그리고 내가 치명적인 걸 빼먹었는데..

 

참고로, Vite에서 접근 가능한 환경 변수는 일반 환경 변수와 구분을 위해 VITE_ 라는 접두사를 붙여 나타냅니다. 

라는 점. 그래서 위에도 수정했다 .. ㅠㅠ

여튼 REACT_로 변수명 시작했다가 에러났다. 

변수명은 VITE로 시작하기 !

(사실 위에서 가져온 글에도 써있다. 근데 안써줘도 잘 작동되는 거 같길래 안해줬더니 이런 에러가 .ㅠ)