React+TypeScript+Firebase授权页报错：process is not defined

问题根源 #

你当前的代码存在两个核心问题：

• require('dotenv').config() 和 import * as fs from 'fs' 是Node.js环境专属代码，浏览器端不支持这些模块；而且React（尤其是Create React App）本身已内置环境变量加载机制，完全不需要手动引入dotenv。
• 浏览器编译后的代码中不存在process对象，直接引用process.env必然触发未定义错误。

修复步骤 #

1. 清理冗余代码
   删掉Firebase配置文件里的这两行无效代码：

   require('dotenv').config();
   import * as fs from 'fs'
   

2. 确认.env文件规范

   • 确保.env文件放在项目根目录（与package.json同级）
   • 所有变量名必须以REACT_APP_开头，格式示例：

     REACT_APP_apiKey=你的实际密钥
     REACT_APP_authDomain=你的认证域名
     REACT_APP_projectId=你的项目ID
     # 其余变量按此格式编写
     

   • 注意：变量值不要加引号，每行仅声明一个变量

3. 重启开发服务器
   修改.env文件后，必须重启npm start，否则新的环境变量不会被加载生效。

4. TypeScript类型声明（可选但推荐）
   为避免TypeScript编译报错，在src目录下创建env.d.ts文件，添加以下类型声明：

   declare namespace NodeJS {
     interface ProcessEnv {
       REACT_APP_apiKey: string;
       REACT_APP_authDomain: string;
       REACT_APP_projectId: string;
       REACT_APP_storageBucket: string;
       REACT_APP_messagingSenderId: string;
       REACT_APP_appId: string;
       REACT_APP_measurementId: string;
     }
   }
   

修改后的Firebase配置文件 #

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

export const firebaseConfig = {
  apiKey: process.env.REACT_APP_apiKey,
  authDomain: process.env.REACT_APP_authDomain, 
  projectId: process.env.REACT_APP_projectId,
  storageBucket: process.env.REACT_APP_storageBucket, 
  messagingSenderId: process.env.REACT_APP_messagingSenderId,
  appId: process.env.REACT_APP_appId, 
  measurementId: process.env.REACT_APP_measurementId,
};

// Initialize Firebase
initializeApp(firebaseConfig);

export const auth = getAuth();

内容的提问来源于stack exchange，提问作者Lanlokun