react firebase config.env文件不起作用

Question

我有一个关于使用react应用程序配置firebase的问题。我将所有firebase配置信息作为环境变量放在顶部目录的.env文件中。当我尝试将它们用作＜code＞process.env时。REACT_APP_smth，它们都不起作用。一旦我将变量替换为真实的原始配置信息，我的应用程序就可以工作了。但可以肯定，这太危险了，所以我不想这么做。

有人知道如何解决这个问题吗？？感谢您提前在这里花费的时间和精力。

我把REACT_APP_FIREBASE_API_KEY换成了123456789。

REACT_APP_FIREBASE_API_KEY = "123456789"
REACT_APP_FIREBASE_AUTH_DOMAIN = "kinnikuhub.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE_URL = "https://kinnikuHub.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID = "kinnikuhub"
REACT_APP_FIREBASE_STORAGE_BUCKET = "kinnikuhub.appspot.com"
REACT_APP_FIREBASE_MESSAGING_SENDER_ID = "131675559"
REACT_APP_FIREBASE_APP_ID = "1:131675559:web:3ca3bbad263b6be90ff282"

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// import { getAnalytics } from "firebase/analytics";
import { addDoc, getDocs, getFirestore } from "firebase/firestore"
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { collection } from "firebase/firestore";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
export const db = getFirestore();

export const auth = getAuth(app);
const provider = new GoogleAuthProvider();
export const signInWithGoogle = () => {
  signInWithPopup(auth, provider)
    .then((res) => {
      console.log(res);
      
      // todo: Why create users table?? To let users have personal info, number of answers and quizzes cretaed, biography, sns links, etc
      // todo: 1st, check if res.user exists
      const userCollectionRef = collection(db, 'users');
      let userExistance = false;
      console.log(`currentUser.uid => ${res.user.uid}`)
      console.log(userExistance)
      const checkUserExists = async () => {
        const querySnapshot = await getDocs(userCollectionRef);
        querySnapshot.forEach( (doc) => {
          // doc.data() is never undefined for query doc snapshots
          // console.log(doc.id, " => ", doc.data());      
          // console.log(`currentUser.uid => ${res.user.uid}`)
          if (doc.data().uid === res.user.uid) {
            userExistance = true;
            // console.log(userExistance)
            return 0;
          }
        });
        console.log(userExistance)
        // todo: 2nd, add this user to users collection if it doesn't exists
        if (userExistance === false) {
          console.log(`userExistance is false, meaning this user hasn't been registerd so I am going add the user into users collection!!! ${res.user.displayName}, ${JSON.stringify(res.user)}`)
          const addUser = async () => {
            const payload = {
              username: res.user.displayName,
              uid: res.user.uid,
              email: res.user.email,
              photoURL: res.user.photoURL,
              createdAt: new Date(),
              bio: "biography",
            };
            await addDoc(userCollectionRef, payload);
          }
          addUser();
        } else {
          console.log('This user has been already registered!! So glad he/she keeps using this app!!')
        }
      }
      checkUserExists();


    }).catch((err) => {
      console.log(err);
    })
}

// export const AuthState = () => {
//   const [userInfo, setUserInfo] = useState({})
//   onAuthStateChanged(auth, (user) => {
//     if (user) {
//       const username = user.displayName;
//       const uid = user.uid;
//       const email = user.email;
//       const photoURL = user.photoURL
//       // const emailVerified = user.emailVerified
  
//       setUserInfo({username, uid, email, photoURL});
      
//       console.log(`username => ${username}`)
//       console.log(`uid => ${uid}`)
//       console.log(`email => ${email}`)
//       console.log(`photoURL => ${photoURL}`)
//       // console.log(`emailVerified => ${emailVerified}`)
//       return userInfo;
//     } else {
//       console.log("no user signed in")
//     }
//   })
// }

// sendEmailVerification(auth.currentUser)
//   .then(() => {
//     console.log('email verification sent!')
//   })

##.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*

背景：昨天，我初始化了我的电脑，在我的macbook air中安装了Monterey，电脑中的文件都不见了。然后，我git克隆了这个应用的repo。

Answer 1

.env 中的变量值不应括在引号中。删除引号。

Answer 2

我也有同样的问题。我只用实际变量替换了项目ID来解决这个问题。

例：-

const firebaseConfig = {
    apiKey: process.env.REACT_APP_APIKEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    projectId: "personal-portfolio-f1e9f",
    storageBucket: process.env.REACT_APP_STORAGEBUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID,
    appId: process.env.APPID,
    measurementId: process.env.MEASUREMENTID
  };

Answer 3

从我看到的情况来看，除了文件名本身之外，所有内容都是正确的。我也努力尝试让它工作，直到我做了这个简单的改变：

尝试将firebase.js文件重命名为firebase.config.js，这将把process.env变量读取为实际变量。