使用.env配置Firebase时出现process未定义错误的问题

可能的原因及对应解决办法 #

1. 使用Vite而非Create React App（CRA）构建项目 #

Vite默认不支持process.env，而是采用import.meta.env作为环境变量的访问方式，这是触发该错误的最常见原因。

解决步骤：

• 修改.env文件的变量前缀为VITE_，同时去掉值两侧的多余双引号，示例：

  VITE_FIREBASE_API_KEY=tester
  VITE_FIREBASE_AUTH_DOMAIN=test
  VITE_FIREBASE_PROJECT_ID=tester
  VITE_FIREBASE_STORAGE_BUCKET=test
  VITE_FIREBASE_MESSAGING_SENDER_ID=123
  VITE_FIREBASE_APP_ID=123test
  VITE_FIREBASE_MEASUREMENT_ID=tester
  

• 更新firebase.config.js中的变量引用：

  // Import the functions you need from the SDKs you need
  import { initializeApp } from "firebase/app";
  import { getAnalytics } from "firebase/analytics";
  
  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,
    measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
  };
  
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  

• 重启Vite开发服务器

2. 使用Create React App但未重启开发服务器 #

CRA仅在启动时加载.env文件，修改.env后必须重启服务器才能读取新变量。

解决步骤：

• 按Ctrl+C关闭当前开发服务，重新运行npm start或yarn start
• 修正.env格式：去掉值两侧的双引号，正确格式为REACT_APP_FIREBASE_API_KEY=tester，多余引号会被当作值的一部分，导致变量解析异常

3. .env文件位置或命名错误 #

需确保.env文件放在项目根目录（与package.json同级），文件名必须是.env（注意前缀的点），不能误用.env.local、.env.development等环境区分文件名（除非你明确需要多环境配置）。

解决步骤：

• 确认文件位置和名称无拼写错误
• 若使用多环境文件，需对应启动命令的环境（比如npm run build会自动加载.env.production）

4. CRA配置被修改或版本过低 #

若曾执行eject操作修改过CRA配置，或使用过旧版本CRA，可能导致环境变量注入逻辑失效。

解决步骤：

• 更新CRA到最新版本：运行npm install react-scripts@latest
• 若已eject，检查config/env.js文件，确保保留了环境变量的注入逻辑

内容的提问来源于stack exchange，提问作者program.exe