React项目报错：Uncaught ReferenceError: process is not defined 求助

一、解决「Uncaught ReferenceError: process is not defined」错误 #

你的项目基于Vite构建，Vite默认不会在浏览器环境注入process对象，错误栈指向yarn的cli.js，大概率是某个依赖（尤其是react-error-overlay）尝试访问process导致的，按以下步骤排查：

1. 配置Vite注入环境变量
   在项目根目录的vite.config.js（或vite.config.ts）中添加如下配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     define: {
       'process.env': {} // 注入空的process.env对象，避免未定义报错
     }
   })
   

2. 移除冲突依赖配置
   Vite自带错误提示机制，react-error-overlay可能与Vite不兼容，尝试：

   • 删除package.json中的resolutions字段
   • 删除devDependencies里的react-error-overlay
   • 执行npm install（或yarn install）重新安装依赖
   • 重启开发服务npm run dev

3. 清理缓存重装依赖

   • 删除项目根目录的node_modules文件夹
   • 删除package-lock.json（或yarn.lock）
   • 执行npm cache clean --force（或yarn cache clean）
   • 重新安装依赖并启动服务

二、Git项目回滚（类似Windows系统还原） #

Git提供完整的版本回溯能力，按以下步骤操作：

1. 查看提交日志定位稳定版本 #

打开WebStorm终端（或Windows命令提示符），进入项目根目录执行：

git log --oneline

命令会显示所有提交记录（格式为「简短哈希值 + 提交说明」），找到最后一个能正常运行的稳定提交，记下它的哈希值（比如a1b2c3d）。

2. 回滚到稳定版本的两种方式 #

方式一：硬重置（丢弃当前未提交修改）

如果当前修改不需要保留，直接恢复到目标提交状态：

git reset --hard a1b2c3d

方式二：创建回滚提交（保留历史记录）

若修改已推送到远程仓库，不想破坏历史，用revert生成新提交撤销更改：

git revert a1b2c3d..HEAD

执行后推送到远程：git push

3. WebStorm可视化操作（新手友好） #

• 打开右侧边栏「Git」工具窗口，切换到「Log」标签
• 找到目标稳定提交，右键选择「Reset Current Branch to Here...」
• 在弹窗中选择「Hard」（丢弃当前修改）或「Mixed」（保留文件修改），点击「Reset」完成回滚

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