Create React App中process is not defined错误求助（已配置Webpack）

问题分析 #

你当前配置里把process设为false，这会让Webpack忽略对process模块的处理，但readable-stream这类依赖的代码里直接引用了process，浏览器环境本身没有这个全局变量，因此抛出错误。

解决方案步骤 #

1. 安装必要的polyfill包 #

先确保安装process及其他需要的polyfill依赖：

npm install process stream-browserify crypto-browserify browserify-zlib querystring-es3 path-browserify timers-browserify stream-http https-browserify net-browserify url assert vm-browserify null-loader --save-dev

2. 修改customize-cra配置文件 #

调整config-overrides.js，修正process的fallback配置，并添加全局注入逻辑：

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

module.exports = override((config) => {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    // 替换为process的浏览器polyfill，而非设为false
    'process': require.resolve('process/browser'),
    'zlib': require.resolve('browserify-zlib'),
    'querystring': require.resolve('querystring-es3'),
    'stream': require.resolve('stream-browserify'),
    'path': require.resolve('path-browserify'),
    'fs': false,
    'timers': require.resolve('timers-browserify'),
    'crypto': require.resolve('crypto-browserify'),
    'http': require.resolve('stream-http'),
    'https': require.resolve('https-browserify'),
    'net': require.resolve('net-browserify'),
    'url': require.resolve('url/'),
    'assert': require.resolve('assert/'),
    'vm': require.resolve('vm-browserify'),
    'async_hooks': false,
    'child_process': false,
  };

  // 全局注入process变量，让依赖代码能访问到完整的process对象
  config.plugins.push(
    new webpack.ProvidePlugin({
      process: 'process/browser',
    })
  );

  // 修正EnvironmentPlugin的NODE_ENV配置逻辑
  config.plugins.push(
    new webpack.EnvironmentPlugin({
      NODE_ENV: process.env.NODE_ENV || 'development',
    })
  );

  // 排除destroy包
  config.module.rules.push({
    test: /\/node_modules\/destroy\//,
    use: 'null-loader',
  });

  return config;
});

3. 兜底处理（可选） #

如果仍有问题，可在public/index.html的<head>标签中添加全局变量定义：

<script>
  window.process = {
    env: { NODE_ENV: '%NODE_ENV%' }
  };
</script>

无效原因说明 #

• process: false会让Webpack跳过process模块的处理，但依赖代码需要访问process对象的属性（比如process.nextTick），浏览器环境无此全局变量导致报错。
• 仅用EnvironmentPlugin只能注入环境变量，无法提供完整的process对象，满足不了依赖的需求。

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