React浏览器项目中Module not found: Can't resolve 'crypto'问题求助

核心原因 #

浏览器环境本身不支持Node.js的核心模块（如crypto、stream），若项目或依赖中直接引用了这些模块，需通过react-app-rewired手动配置webpack提供对应polyfill。

步骤1：安装所需polyfill包 #

执行以下命令安装所有必要兼容包：

npm install crypto-browserify stream-browserify buffer util process --save-dev

步骤2：修改/创建config-overrides.js #

在项目根目录下创建或修改config-overrides.js文件，添加webpack的fallback配置与全局变量注入：

const webpack = require('webpack');

module.exports = function override(config) {
  // 配置Node核心模块的浏览器兼容替代
  config.resolve.fallback = {
    ...config.resolve.fallback,
    crypto: require.resolve('crypto-browserify'),
    stream: require.resolve('stream-browserify'),
    buffer: require.resolve('buffer'),
    util: require.resolve('util'),
  };

  // 注入全局变量，模拟Node环境的Buffer和process
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser',
    }),
  ];

  return config;
};

步骤3：重启开发服务 #

停止当前的npm run start进程，重新执行：

npm run start

为什么之前的方法无效？ #

• crypto-js是独立加密库，无法替代Node.js原生crypto模块的全局引用，必须用crypto-browserify做polyfill
• tsconfig.json的paths仅用于路径别名，不处理Node核心模块的浏览器兼容
• 未配置webpack的resolve.fallback，react-app-rewired不会自动处理这些缺失的模块

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