React中使用JWT库v8.5.1遇模块找不到错误的解决方法

问题原因 #

react-scripts 5.x基于webpack 5，而webpack 5不再默认提供Node.js核心模块（如crypto、util、stream）的polyfill，JWT相关依赖（如jwa）依赖这些模块，因此编译时出现模块找不到的错误。

解决步骤 #

方法一：使用craco修改webpack配置（推荐） #

1. 安装所需依赖包
   在项目根目录执行命令：

npm install @craco/craco crypto-browserify stream-browserify util-browserify buffer process --save-dev

2. 创建craco.config.js配置文件
   在项目根目录新建该文件，添加以下配置：

const webpack = require('webpack');

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

3. 修改package.json中的启动脚本
   将原有脚本替换为：

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

4. 重启开发服务器
   停止当前运行的开发服务，重新执行npm start即可。

方法二：忽略不需要的模块（不推荐，可能导致功能异常） #

若确认部分模块不影响JWT核心功能，可临时将其fallback设为false，但此方式可能引发JWT编码/解码失败：

// 需通过craco或react-app-rewired添加该配置
resolve: {
  fallback: {
    crypto: false,
    stream: false,
    util: false,
  },
}

替代方案 #

如果仅需前端处理JWT，可替换为纯浏览器端的JWT库，比如jwt-decode（仅解码）或jsrsasign（支持编码和解码），彻底避免依赖Node核心模块。

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