部署Create React App到Cloudflare遇错：Webpack5无法解析'crypto'模块

问题根源 #

Webpack 5移除了Node.js核心模块（如crypto）的默认polyfill支持，而bcryptjs依赖该模块，导致构建阶段无法解析依赖。

解决方案 #

方案1：用react-app-rewired覆盖Webpack配置（无需eject项目） #

• 安装必要依赖：

npm install react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process --save-dev

• 在项目根目录创建config-overrides.js文件，写入以下配置：

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url"),
        "buffer": require.resolve("buffer")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

• 修改package.json中的scripts命令：

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

方案2：Eject项目后直接修改Webpack配置 #

如果已经执行过eject命令：

• 安装polyfill依赖：

npm install crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process --save-dev

• 打开config/webpack.config.js，找到resolve.fallback节点（无则添加），补充polyfill映射：

resolve: {
  fallback: {
    "crypto": require.resolve("crypto-browserify"),
    "stream": require.resolve("stream-browserify"),
    "assert": require.resolve("assert"),
    "http": require.resolve("stream-http"),
    "https": require.resolve("https-browserify"),
    "os": require.resolve("os-browserify"),
    "url": require.resolve("url"),
    "buffer": require.resolve("buffer")
  },
},

• 在plugins数组中添加ProvidePlugin配置：

plugins: [
  // 保留原有插件，新增以下内容
  new webpack.ProvidePlugin({
    process: 'process/browser',
    Buffer: ['buffer', 'Buffer']
  })
]

方案3：替换为纯浏览器端加密库（推荐） #

若不需要bcryptjs的特定功能，可改用更适配浏览器环境的加密库，比如crypto-js：

npm install crypto-js --save

随后将代码中bcryptjs的调用替换为crypto-js的对应方法，彻底避免Node核心模块依赖。

验证修复 #

执行npm run build确认错误消除后，再部署到Cloudflare即可。

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