未捕获的引用错误：使用 React 和 Firebase 的前端代码中未定义进程

Question

我正在使用 React 和 Vite 开发前端应用程序。我已经克隆了一个 React/Bootstrap theme template 并正在为我的项目修改它。但是，我在尝试配置和初始化 Firebase 进行身份验证时遇到了错误。

这是我试图实现的代码：

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

console.log(process.env);

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
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);  // gives us an auth instance

export default auth;   // in order to use this auth instance elsewhere

但是，当我尝试运行该项目并在 Google Chrome 中打开控制台窗口时，我收到以下错误：

Uncaught ReferenceError: process is not defined
    at firebase.js?t=1714400003156:4:13

我不确定为什么会发生此错误，特别是当我确保代码中的

process.env

实例正确对应于我的

.env

文件中的变量时。

Answer 1

我自己已经解决了问题，我只是想为遇到类似问题的任何人进一步详细说明我的帖子。

我注意到，在项目中使用Vite构建工具时，有一个独特的要求是所有环境变量都需要以

VITE_

开头。 Vite 仅公开以此前缀开头的

import.meta.env

对象上的变量。因此，不要指望它会公开以

REACT_APP_

开头的变量。

在我的具体情况下，我必须将

.env

文件中列出的所有环境变量从

REACT_APP_FIREBASE_

重命名为

VITE_FIREBASE_

。

现在

.env

应该看起来像这样：

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=
VITE_FIREBASE_MEASUREMENT_ID=

此外，在我的 JavaScript 文件中，我需要将所有提到的

REACT_APP_FIREBASE_

替换为

VITE_FIREBASE_

。

这是新代码现在的示例：

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

console.log(import.meta.env.VITE_FIREBASE_PROJECT_ID);

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);

// gives us an auth instance
const auth = getAuth(app);

// in order to use this auth instance elsewhere
export default auth;

总之，在我进行这些调整并重新启动我的Vite服务器后，正确的环境变量就位了。