React应用出现Uncaught ReferenceError: process is not defined报错求助

问题场景 #

• 执行npm run start（对应react-scripts start）启动React应用
• 修改代码并保存后，浏览器控制台抛出Uncaught ReferenceError: process is not defined错误，应用随即冻结

错误原因 #

这个问题通常出现在使用react-scripts 5.x及以上版本的项目中——该版本底层采用Webpack 5，不再默认将Node.js的process对象注入浏览器环境，当代码或依赖中直接引用process时，热重载（修改代码保存）过程就会触发该错误。

解决方案 #

方案1：替换process.env为浏览器兼容的写法（推荐）

将代码中所有process.env.REACT_APP_XXX替换为import.meta.env.REACT_APP_XXX（适用于新版React工具链），这是符合现代前端构建工具规范的写法，无需额外配置。

方案2：通过自定义Webpack配置注入process环境

如果不想修改现有代码，可以借助react-app-rewired修改Webpack配置：

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件：

const { override, addWebpackPlugin } = require('customize-cra');
const webpack = require('webpack');

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(process.env)
    })
  )
);

3. 修改package.json中的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

方案3：降级react-scripts版本（不推荐）

如果上述方案都无法快速落地，可以临时降级到react-scripts 4.x版本（该版本默认注入process对象）：

npm install react-scripts@4.0.3 --save

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