无法解析web3模块求助：已尝试常规安装方案仍未解决

问题背景 #

在React项目中导入web3模块时无法识别，执行npm install web3后项目崩溃，删除node_modules重新安装也无法解决。相关代码和依赖配置如下：

核心代码（usePools.js） #

import Web3 from  'web3';
import { useState, useEffect } from 'react';
import { useConfig } from '@usedapp/core';

import { ROUTER_ADDRESS } from '../config';
import { getFactoryInfo, getRouterInfo } from '../utils';

export const loadPools = async (providerUrl) => {
    const provider = new Web3.providers.HttpProvider(providerUrl);
    const web3 = new Web3(provider);

    const routerInfo =  await getRouterInfo(ROUTER_ADDRESS, web3);
    const factoryInfo = await getFactoryInfo(routerInfo.factory, web3);

    return factoryInfo.pairsInfo;

}


export const usePools = () => {
    const { readOnlyChainId, readOnlyUrls } = useConfig();
    const [loading, setLoading] = useState(true);
    const [pools, setPools] = useState({});


    useEffect(() =>{
        loadPools(readOnlyUrls[readOnlyChainId])
        .then((pools) => {
            setPools(pools)
            setLoading(false)
        })
    }, [readOnlyUrls, readOnlyChainId]);
    

    return [loading, pools];
}

依赖配置（package.json） #

{
  "name": "@my-app/react-app",
  "version": "1.0.0",
  "homepage": "./",
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "dependencies": {
    "@my-app/contracts": "^1.0.0",
    "@apollo/client": "^3.5.10",
    "@ethersproject/contracts": "^5.6.0",
    "@ethersproject/providers": "^5.6.0",
    "@testing-library/dom": "^8.11.3",
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/react": "^17.0.40",
    "graphql": "^16.3.0",
    "ipfs-deploy": "^11.2.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "@usedapp/core": "^1.1.5",
    "@uniswap/sdk": "^3.0.2",
    "@uniswap/v2-core": "^1.0.1",
    "@uniswap/v2-periphery": "^1.1.0-beta.0",
    "ethers": "^5.7.0",
    "web3": "^4.5.0"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "scripts": {
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "ipfs": "yarn build && ipfs-deploy build/",
    "start": "react-scripts start",
    "test": "react-scripts test"
  }
}

错误截图 #

• 原始导入错误：
• 安装web3后崩溃错误：

问题根源 #

1. web3版本兼容问题：你安装的web3@4.5.0为纯ES模块，而项目使用的react-scripts@4.0.3基于webpack 4，webpack 4对ES模块的处理存在兼容性缺陷，导致模块无法正常识别，进而引发项目崩溃。
2. API写法不匹配：web3 v4的API与v3及以下版本存在差异，当前代码写法基于旧版web3，直接使用v4会导致调用错误。

解决方案 #

方案一：降级web3到v3版本（快速解决，无需修改代码） #

web3 v3版本支持CommonJS模块规范，与react-scripts@4.0.3完全兼容，且API写法与现有代码一致：

1. 卸载当前web3版本：

npm uninstall web3

2. 安装web3 v3稳定版：

npm install web3@3.4.0

3. 删除node_modules和锁文件后重新安装依赖：

rm -rf node_modules package-lock.json
npm install

4. 重启项目：

npm start

方案二：升级react-scripts到v5版本（适配web3 v4，需调整代码） #

react-scripts v5基于webpack 5，对ES模块支持更完善，可以兼容web3 v4，但需要调整代码以适配v4的API：

1. 升级react-scripts：

npm install react-scripts@latest

2. 调整web3导入和使用代码：

// 导入方式改为带大括号的命名导入
import { Web3 } from 'web3';

export const loadPools = async (providerUrl) => {
    // web3 v4可直接传入provider URL创建实例，无需手动创建HttpProvider
    const web3 = new Web3(providerUrl);

    const routerInfo =  await getRouterInfo(ROUTER_ADDRESS, web3);
    const factoryInfo = await getFactoryInfo(routerInfo.factory, web3);

    return factoryInfo.pairsInfo;
}

3. 清理依赖后重新安装并重启项目：

rm -rf node_modules package-lock.json
npm install
npm start

额外注意事项 #

• 若使用yarn管理依赖，需替换npm命令为yarn，并删除yarn.lock文件。
• 检查@usedapp/core等其他web3相关依赖是否与web3版本兼容，避免出现连锁冲突。

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