React项目npm run build后web3.min.js出现类型错误排查求助

问题描述 #

使用react-scripts执行npm run start时项目可正常运行，但执行npm run build后在本地Express服务器测试时，出现如下错误：

Uncaught TypeError: Super expression must either be null or a function
    i web3.min.js:25038
    l web3.min.js:25037
    i web3.min.js:25036
    exports web3.min.js:25192
    exports web3.min.js:25193
    r web3.min.js:13
    exports web3.min.js:24116
    r web3.min.js:13
    exports web3.min.js:19276
    r web3.min.js:13
    exports web3.min.js:3847
    r web3.min.js:13
    exports web3.min.js:19238
    r web3.min.js:13
    exports web3.min.js:48
    <anonymous> web3.min.js:49
    f account:1
    423 Bet.jsx:20
    f account:1
    200 walletconnect.png:1
    f account:1
    a account:1
    e account:1
    <anonymous> main.f01fcd85.chunk.js:1

已尝试的排查动作：

• 移除相关React组件Bet.jsx
• 更新web3.js版本
• 使用旧版本项目验证后端可用性

以上操作均未解决问题。

可能的解决方案 #

1. 调整Web3引入方式适配生产打包 #

生产构建时react-scripts的压缩与tree-shaking可能误处理Web3模块，尝试：

• 替换直接引入web3.min.js的方式，改用ES模块引入：import Web3 from 'web3'
• 在package.json中添加"sideEffects": false（确认项目无副作用代码时），或针对Web3相关文件单独配置sideEffects

2. 配置externals排除Web3打包 #

若Web3通过CDN引入，可将其排除在生产打包外，避免重复打包冲突：

• 安装react-app-rewired和customize-cra，创建config-overrides.js：

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

module.exports = override(
  addWebpackExternals({
    web3: 'Web3'
  })
);

• 修改package.json的build脚本为"build": "react-app-rewired build"
• 在public/index.html中添加CDN链接：<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>

3. 匹配Web3版本与构建工具兼容性 #

部分Web3版本在被babel或terser压缩时会触发类继承错误，尝试：

• 降级Web3到稳定版本（如1.8.2），规避最新版本的兼容性问题
• 通过react-app-rewired修改terser配置，禁用可能引发问题的压缩规则：

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

module.exports = override(
  addTerserPlugin({
    terserOptions: {
      mangle: false,
      compress: {
        passes: 1
      }
    }
  })
);

4. 检查生产环境变量配置 #

开发与生产环境的变量差异可能导致Web3初始化异常：

• 在src目录创建.env.production文件，配置生产环境专属的Web3节点地址等变量
• 初始化Web3时打印实例信息，确认生产环境下配置正确

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