React+Node.js图片上传时出现Can't resolve 'crypto'错误的求助

核心原因 #

webpack 5默认移除了Node.js核心模块的polyfill，bcryptjs在浏览器环境下运行时依赖这些模块，导致解析错误。另外要注意：bcryptjs的密码加密逻辑绝对不能放在前端——前端代码可被反编译，加密逻辑完全暴露，根本起不到密码保护的作用，正确做法是把加密逻辑移到Node.js后端。

修复步骤 #

步骤1：确认webpack配置是否被正确加载 #

• 如果你用的是Create React App（CRA）默认项目，直接创建的webpack.config.js不会生效，CRA会覆盖自定义配置。需要用react-app-rewired或craco修改配置：
  1. 安装依赖：npm install react-app-rewired craco --save-dev
  2. 替换package.json里的scripts：

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

  3. 在根目录创建config-overrides.js，写入webpack配置。
• 如果你是自定义webpack项目，检查package.json的启动命令是否指定了配置文件，比如：

  "scripts": {
    "start": "webpack serve --config webpack/webpack.config.js"
  }
  

步骤2：安装完整的polyfill依赖 #

除了crypto-browserify，还需要补充其他关联依赖：

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

步骤3：完善webpack配置 #

在webpack配置文件（或config-overrides.js）中添加以下配置：

const webpack = require('webpack');

module.exports = {
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer/")
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ]
};

步骤4：更合理的架构方案（强烈推荐） #

彻底规避前端依赖问题，把bcryptjs的加密逻辑移到Node.js后端：

1. 前端只负责收集用户密码，通过HTTPS发送给后端接口。
2. 后端接收密码后，用bcryptjs完成加密再存入数据库：

   const bcrypt = require('bcryptjs');
   const saltRounds = 10;
   
   // 加密密码
   bcrypt.hash(userPassword, saltRounds, (err, hash) => {
     // 将hash值存入数据库
   });
   

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