如何修复jsonwebtoken的Can't resolve 'buffer'、'crypto'模块缺失错误？

方案一：使用浏览器端JWT解码库（推荐新手） #

因为你仅需解码JWT提取name，不需要Node端的签名/验证功能，用专门的浏览器端库更简单，无需处理polyfill：

• 卸载jsonwebtoken：

  npm uninstall jsonwebtoken
  

• 安装轻量的浏览器端解码库jwt-decode：

  npm install jwt-decode
  

• 修改Activate.js中的解码逻辑：

  import jwtDecode from 'jwt-decode';
  
  // 在useEffect钩子内
  const token = 你的路由参数token;
  const decoded = jwtDecode(token);
  setName(decoded.name);
  

方案二：为Webpack 5添加Node核心模块Polyfill #

如果你一定要保留jsonwebtoken，需要手动配置polyfill，分两种项目类型处理：

类型1：Create React App（CRA）项目 #

CRA默认隐藏Webpack配置，需用craco修改：

1. 安装依赖：

   npm install @craco/craco buffer crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url --save-dev
   

2. 在项目根目录创建craco.config.js，写入配置：

   const webpack = require('webpack');
   
   module.exports = {
     webpack: {
       configure: {
         resolve: {
           fallback: {
             buffer: require.resolve('buffer'),
             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'),
           },
         },
         plugins: [
           new webpack.ProvidePlugin({
             Buffer: ['buffer', 'Buffer'],
           }),
         ],
       },
     },
   };
   

3. 修改package.json中的启动脚本，替换react-scripts为craco：

   "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test"
   }
   

类型2：自定义Webpack配置的项目 #

直接修改你的webpack.config.js：

1. 安装依赖：

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

2. 修改Webpack配置：

   const webpack = require('webpack');
   
   module.exports = {
     // 其他已有配置...
     resolve: {
       fallback: {
         buffer: require.resolve('buffer'),
         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'),
       },
     },
     plugins: [
       // 已有插件...
       new webpack.ProvidePlugin({
         Buffer: ['buffer', 'Buffer'],
       }),
     ],
   };
   

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