React项目启动时出现'crypto'模块未找到编译错误，配置fallback无效的解决求助

看起来你遇到的核心问题是：使用react-scripts@5.x（基于Webpack 5）时，直接修改自定义的webpack.config.js不会生效，因为Create React App（CRA）会封装并使用自己内部的Webpack配置，外部的配置文件会被忽略。这就是为什么你之前添加resolve.fallback后问题依然存在的原因。

下面是针对你的场景的具体解决方案：

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

这个工具允许你在不eject的情况下覆盖CRA的Webpack配置，步骤如下：

1. 安装必要依赖

npm install react-app-rewired crypto-browserify stream-browserify process buffer --save-dev

2. 在项目根目录创建config-overrides.js文件

const webpack = require('webpack');

module.exports = function override(config, env) {
  // 配置Node核心模块的fallback
  config.resolve.fallback = {
    ...config.resolve.fallback, // 保留原有配置
    "crypto": require.resolve("crypto-browserify"),
    "stream": require.resolve("stream-browserify")
  };

  // 添加Webpack插件，提供全局的process和Buffer对象（Web3依赖这些）
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ];

  return config;
};

3. 修改package.json中的启动脚本
   把原来的react-scripts替换为react-app-rewired：

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

4. 重启开发服务器
   现在重新运行npm start，crypto相关的错误应该会被解决。

方案二：如果确实不需要crypto polyfill（不推荐，因为Web3依赖它） #

如果你确定不需要crypto模块的polyfill，同样需要通过react-app-rewired来配置，修改config-overrides.js为：

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    "crypto": false
  };
  return config;
};

额外代码修复（和当前错误无关，但避免后续问题） #

你的loadBlockchaindata函数中有一个异步调用错误：

// 原代码
const accounts=web3.eth.getAccounts();
const account=accounts[0];

web3.eth.getAccounts()是异步函数，会返回Promise，所以需要添加await：

// 修改后
const accounts=await web3.eth.getAccounts();
const account=accounts[0];

为什么之前的配置无效？ #

CRA的设计是封装Webpack配置，除非你执行npm run eject暴露所有配置，否则自定义的webpack.config.js不会被加载。react-app-rewired的作用就是在不破坏CRA封装的前提下，修改内部的Webpack配置。

内容的提问来源于stack exchange，提问作者R.S4697