React v18中crypto模块找不到问题求助（webpack <5兼容问题）

我试了十几种所谓的解决方案，都没搞定这个问题。我的React应用几小时前还好好的，现在一直报这个错，甚至新建React项目也是一样。我找到了node_modules > react-scripts > config下的webpack.config.js，但完全不知道该把这段代码加在哪里：

resolve: {
    fallback: { crypto: false },
},

我怀疑是React 18的问题，有没有人知道怎么解决？提前谢过。

编译报错信息 #

Compiled with problems:

ERROR in ../node_modules/cookie-signature/index.js 4:13-30

Module not found: Error: Can't resolve 'crypto' in 'C:\Users\Micha\OneDrive\Desktop\APPS\REACT\HOLISTIC\DEVELOPER\v2\api\node_modules\cookie-signature'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
- install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "crypto": false }

已尝试操作 #

• 执行了npm i crypto crypto-browserify cookie-signature
• 在npx create-react-app client创建的client文件夹中新建了webpack.config.js，内容如下：

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

• 执行了npm i crypto-browserify并重启React应用，但还是报同样的错

项目package.json内容 #

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.5",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "cookie-signature": "^1.2.0",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.1.1",
    "firebase": "^9.9.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-persist": "^1.0.2",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "redux-persist": "^6.0.0",
    "uuid": "^9.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

核心问题是create-react-app默认不会读取项目根目录的webpack.config.js，直接修改node_modules里的配置也不持久，给你两个可行方案：

方法一：用react-app-rewired修改配置（无需eject，推荐） #

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录新建config-overrides.js，写入：

const { override, addWebpackResolve } = require('customize-cra');

module.exports = override(
  addWebpackResolve({
    fallback: {
      "crypto": require.resolve("crypto-browserify")
    }
  })
);

3. 修改package.json里的scripts字段：

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

4. 重启项目：

npm start

方法二：eject后修改webpack配置（不可逆，不推荐） #

1. 执行eject命令（此操作会暴露所有配置，且无法恢复）：

npm run eject

2. 找到项目根目录下的config/webpack.config.js，搜索resolve字段，把fallback配置添加进去：

resolve: {
  // ...保留原有配置
  fallback: {
    // ...其他可能需要的fallback项
    "crypto": require.resolve("crypto-browserify")
  }
}

3. 重启项目即可。

额外提醒 #

• 浏览器环境不需要安装crypto包，直接用crypto-browserify就行，你可以执行npm uninstall crypto删掉它
• cookie-signature是后端常用包，如果前端项目误装了，也可以考虑删掉，前端一般不需要做cookie签名操作

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