使用Vite运行React项目npm run dev时process未定义错误的解决问询

1. 修复“Uncaught ReferenceError: process is not defined”错误 #

这个错误核心是当前React项目的构建工具不支持Node.js的process.env变量，或是环境变量配置不符合工具要求，以下分两种常见项目类型给出解决方案：

若使用Vite创建的项目 #

• 重命名环境变量：将.env文件内的Firebase配置变量前缀改为VITE_，示例：

  VITE_FIREBASE_API_KEY="your-api-key"
  VITE_FIREBASE_AUTH_DOMAIN="your-auth-domain"
  

• 替换代码中的变量引用：把代码里的process.env.FIREBASE_API_KEY改为import.meta.env.VITE_FIREBASE_API_KEY，Firebase配置示例：

  import { initializeApp } from "firebase/app";
  const firebaseConfig = {
    apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
    authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
    // 其他配置项
  };
  const app = initializeApp(firebaseConfig);
  

• 删除冗余代码：Vite会自动加载根目录的.env文件，无需在App.jsx中引入dotenv或调用dotenv.config()，直接删掉相关代码。
• 重启开发服务器：修改环境变量后必须重启npm run dev才能生效。

若使用Create React App(CRA)创建的项目 #

• 确保变量前缀为REACT_APP_：.env文件中的变量必须以REACT_APP_开头，示例：

  REACT_APP_FIREBASE_API_KEY="your-api-key"
  

• 直接使用process.env.REACT_APP_xxx：CRA会自动注入这类变量，无需手动调用dotenv.config()。
• 排查基础问题：检查.env文件是否在项目根目录、变量名无拼写错误，之后重启npm start。

2. 清理并重新构建/启动开发服务 #

npm run dev是启动开发服务器的命令，本身不负责生产构建，根据项目类型执行对应操作：

清理开发缓存并重启服务 #

• Vite项目：删除项目根目录下的node_modules/.vite文件夹，再执行：

  npm run dev
  

• CRA项目：删除node_modules/.cache文件夹，或直接执行带重置缓存参数的启动命令：

  npm start -- --reset-cache
  

清理并构建生产环境文件 #

若需要生成生产构建产物：

• Vite项目：先删除dist文件夹，再执行构建命令：

  rm -rf dist && npm run build
  

• CRA项目：先删除build文件夹，再执行构建命令：

  rm -rf build && npm run build
  

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