React控制台报错：Uncaught ReferenceError: process is not defined 求解决

情况1：用Create React App（CRA）开发 #

• 安装依赖：

  npm install dotenv react-app-rewired --save-dev
  

• 在项目根目录新建config-overrides.js文件，写入：

  const webpack = require('webpack');
  module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
      "process": require.resolve("process/browser")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
      new webpack.ProvidePlugin({
        process: 'process/browser',
      })
    ])
    return config;
  };
  

• 修改package.json里的启动脚本：

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

• 若使用环境变量，.env文件中的变量必须以REACT_APP_为前缀，比如REACT_APP_API_URL=http://example.com，代码中通过process.env.REACT_APP_API_URL访问。

情况2：用Vite开发 #

• 打开vite.config.js，添加全局变量配置：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    define: {
      'process.env': {}
    }
  });
  

• Vite自带环境变量支持，.env文件中的变量需加VITE_前缀，比如VITE_API_URL=http://example.com，代码中用import.meta.env.VITE_API_URL替代process.env访问。

情况3：手动配置Webpack #

• 在webpack.config.js中添加如下配置：

  const webpack = require('webpack');
  
  module.exports = {
    // 其他原有配置...
    resolve: {
      fallback: {
        process: require.resolve('process/browser')
      }
    },
    plugins: [
      new webpack.ProvidePlugin({
        process: 'process/browser'
      })
    ]
  };
  

• 安装process包：

  npm install process --save-dev
  

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