基于MERN栈的React管理员登录页面开发中遭遇Module not found: Can't resolve 'crypto'错误的咨询

我之前在使用jsonwebtoken的React项目里也碰到过一模一样的报错，这是Webpack 5的核心变更导致的，给你两种可行的解决方案：

问题原因 #

重大变更说明：webpack < 5版本默认会包含Node.js核心模块的polyfill，但现在情况已不再如此。请确认您是否需要该模块并为其配置polyfill。

你的依赖jwa（jsonwebtoken的底层依赖）需要Node.js的crypto核心模块，但Webpack 5不再自动为浏览器环境提供这些模块的polyfill，所以才会抛出Module not found: Error: Can't resolve 'crypto'的错误。

解决方案一：添加crypto的polyfill（推荐） #

这个方案适合你需要在浏览器端使用jsonwebtoken功能的场景：

• 首先安装对应的polyfill包：

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

• 然后修改你的Webpack配置：
  • 如果是自定义Webpack配置，在webpack.config.js中添加resolve.fallback配置：

    module.exports = {
      // 保留你原有的其他配置
      resolve: {
        fallback: {
          "crypto": require.resolve("crypto-browserify")
        }
      }
    };
    

  • 如果是Create React App（CRA）项目，因为CRA默认隐藏Webpack配置，你需要用craco来修改：
    1. 先安装craco：

       npm install @craco/craco --save-dev
       

    2. 在项目根目录创建craco.config.js，添加以下内容：

       module.exports = {
         webpack: {
           configure: {
             resolve: {
               fallback: {
                 crypto: require.resolve("crypto-browserify"),
               },
             },
           },
         },
       };
       

    3. 修改package.json里的scripts命令，替换成craco的命令：

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

解决方案二：禁用crypto的polyfill（不推荐） #

如果你确认项目中不需要crypto模块的功能，可以直接在Webpack配置中忽略它：

module.exports = {
  // 其他配置
  resolve: {
    fallback: {
      "crypto": false
    }
  }
};

⚠️ 注意：这个方案可能会导致jsonwebtoken在浏览器端无法正常工作，所以仅当你确定不需要相关功能时使用。

内容的提问来源于stack exchange，提问作者Moksh Singh Dangi