Nuxt 2集成WalletConnect v2遇viem库BigInt转Number错误

问题根源 #

错误TypeError: Cannot convert a BigInt value to a number at Math.pow是因为viem（或其依赖库）中存在将BigInt传入Math.pow的代码——Math.pow仅支持Number类型参数，无法处理BigInt；同时Nuxt 2默认的Babel配置未启用BigInt语法支持，导致客户端环境无法正确解析相关代码。

解决方案 #

1. 配置Babel支持BigInt语法 #

安装Babel插件以兼容BigInt语法：

npm install @babel/plugin-proposal-bigint --save-dev

修改nuxt.config.js，添加Babel插件并确保相关依赖被转译：

export default {
  // 其他配置...
  babel: {
    plugins: ['@babel/plugin-proposal-bigint']
  },
  build: {
    // 转译所有涉及的web3依赖
    transpile: ['viem', '@walletconnect', '@web3-onboard'],
    extend(config, { isClient }) {
      if (isClient) {
        // 针对客户端代码单独配置Babel处理BigInt
        config.module.rules.push({
          test: /\.js$/,
          exclude: /node_modules(?!\/(viem|@walletconnect|@web3-onboard))/,
          use: {
            loader: 'babel-loader',
            options: {
              plugins: ['@babel/plugin-proposal-bigint']
            }
          }
        })
      }
    }
  }
}

2. 修复viem中Math.pow与BigInt的冲突 #

如果上述配置后仍报错，说明viem源码中存在Math.pow接收BigInt的代码，需要用patch-package打补丁：

1. 安装patch-package：

npm install patch-package --save-dev

2. 找到viem中出错的文件（通常在node_modules/viem/dist/目录下），将类似Math.pow(bigintValue, exponent)的代码替换为BigInt原生的幂运算操作符bigintValue ** exponent。

3. 生成补丁文件：

npx patch-package viem

4. 在package.json中添加postinstall脚本，确保依赖安装后自动应用补丁：

{
  "scripts": {
    "postinstall": "patch-package"
  }
}

3. 可选：降级viem到兼容版本 #

如果不想打补丁，可以尝试降级viem到未引入该BigInt问题的版本（比如viem@1.16.4，需自行测试验证）：

npm install viem@1.16.4

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