viteでfirebase v9のenvを書くときの注意

結論

viteを使う場合は
envの書き方が違う

.env

VITE_apiKey=""
VITE_authDomain=""
VITE_projectId=""
VITE_storageBucket=""
VITE_messagingSenderId=""
VITE_appId=""

src/firebase.js (名前は仮)

//Firebase ver9 compliant (modular)
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";


const firebaseApp = initializeApp({
  //ここがviteの場合が違う ⇨ ipmort.meta.env
  apiKey: import.meta.env.VITE_apiKey,
  authDomain: import.meta.env.VITE_authDomain,
  projectId: import.meta.env.VITE_projectId,
  storageBucket: import.meta.env.VITE_storageBucket,
  messagingSenderId: import.meta.env.VITE_messagingSenderId,
  appId: import.meta.env.VITE_appId,
});

//Firebase ver9 compliant (modular)
export const auth = getAuth(firebaseApp);
export const db = getFirestore(firebaseApp);

ドキュメント

まとめ

REACTの場合のプロジェクトの場合は

REACT_APP_FIREBASE_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""

みたいに書いていたが
Viteを使うときは説明書をみなくてはだめですね！反省！