React新手运行应用遇ReferenceError: process is not defined问题求助

安全阿岳

2026-6-20

解决React中ReferenceError: process is not defined的额外方案

以下是你未尝试过的几种可行方案：

通过craco修改webpack配置注入process变量
react-scripts 5.x默认不再在浏览器环境中暴露process对象，可借助craco修改webpack配置：
1. 安装craco依赖：
```
npm install @craco/craco --save-dev
```
2. 在项目根目录创建craco.config.js文件，添加如下配置：
```
const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.DefinePlugin({
          'process.env': JSON.stringify(process.env)
        })
      ]
    }
  }
};
```
3. 修改package.json中的scripts命令，替换为craco：
```
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
```
4. 删除node_modules和package-lock.json，重新执行npm install，再启动项目。
在public/index.html中全局模拟process对象
直接在浏览器环境中注入一个基础的process对象，临时解决依赖问题：
在public/index.html的<head>标签内添加：
```
<script>
  window.process = {
    env: { 
      NODE_ENV: '%NODE_ENV%',
      // 如需其他环境变量可在此补充
    }
  };
</script>
```
保存后重启项目即可。
排查并移除前端代码中的Node环境依赖
检查项目代码或第三方依赖是否引入了仅适用于Node.js环境的包（如fs、path等核心模块），这类包在浏览器中会尝试访问process导致报错。可通过npm ls命令查看依赖树，定位可疑包后替换或移除。
降级react-scripts至4.x版本
若以上方案无效，可尝试降级react-scripts到4.x版本（部分旧依赖可能与5.x存在兼容性问题）：
```
npm install react-scripts@4.0.3
```
同样删除node_modules和锁文件后重新安装依赖。