[error] Vite 환경 변수 에러

📕 문제

프로젝트를 실행시켰는데 아무것도 안뜬다....

에러메세지는?

문제의 firebase.tsx 파일의 5번째줄은?

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth();

process.env.REACT_APP_API_KEY 가 문제인듯 하다

---

📕 해결방법

환경변수를 찾지못해 발생하는 에러였다.

찾아보니

process.env.가 아닌 import.meta.env로 접근해야하며

vite의 .env의 환경변수는 VITE_로 시작해야한다.

apiKey: process.env.REACT_APP_API_KEY,
  
가 아닌

apiKey: import.meta.env.VITE_API_KEY,
  

매번 CRA로 생성하다보니 환경변수를 다룰때 다르게 접근해야하는것을 몰랐다.

---

📕 참조

Vite 공식문서