React项目用aws-amplify出现crypto未定义的TypeError错误

我之前也踩过这个一模一样的坑！这个报错的本质是crypto-browserify依赖Node.js的crypto核心模块，但浏览器环境里并没有这个模块，而且从Webpack 5开始，默认不再自动为Node.js核心模块提供polyfill，所以才会触发这个错误。你之前尝试的把node_modules加入babel-loader排除列表的方案对这个场景没用，因为问题根本不在编译环节，而是缺少必要的浏览器兼容polyfill。

下面是我亲测有效的解决步骤：

1. 安装所需的polyfill依赖 #

首先安装三个必要的包，用来在浏览器环境模拟Node.js的相关模块：

npm install crypto-browserify stream-browserify buffer --save-dev
# 或者用yarn
yarn add crypto-browserify stream-browserify buffer --dev

2. 修改Webpack配置文件 #

需要在你的Webpack配置里添加模块解析回退和全局变量注入的配置：

首先，在配置文件顶部引入Webpack：

const webpack = require('webpack');

然后，在module.exports里添加resolve字段，同时更新plugins数组：

module.exports = {
  // 保留你原有的module配置
  module: { /* ... 你的原有rules ... */ },
  // 新增resolve配置
  resolve: {
    fallback: {
      "crypto": require.resolve("crypto-browserify"),
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer")
    }
  },
  plugins: [
    // 保留你原有的HtmlWebPackPlugin和MiniCssExtractPlugin
    new HtmlWebPackPlugin({ /* ... */ }),
    new MiniCssExtractPlugin({ /* ... */ }),
    // 新增ProvidePlugin，注入全局Buffer变量
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
    }),
  ]
};

为什么这个方案有效？ #

• resolve.fallback告诉Webpack，当遇到Node.js核心模块（比如crypto）时，用我们安装的浏览器兼容版本替换它
• webpack.ProvidePlugin会自动在全局注入Buffer变量，避免某些依赖里直接使用Buffer而找不到的问题

做完这些配置后，重新启动你的项目，这个报错应该就消失了！

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