Nuxt3生产环境集成Uniswap Smart Order Router报BigInt TypeError

问题背景 #

在Nuxt3项目中集成Uniswap时，本地开发环境运行完全正常，但部署到生产环境后，用户点击触发交易的按钮时会出现致命错误TypeError: n.BigInt is not a function，直接导致页面无法渲染。经定位，错误触发点是创建options对象内slippageTolerance属性的Percent实例时。

已排查信息 #

• Node.js版本：本地使用v16.14.2，生产环境为v18.16.0，本地切换至v18.16.0后无法复现该问题
• 相关依赖版本：
  • JSBI: v3.2.5
  • @uniswap/sdk-core: v4.0.1
  • @uniswap/smart-order-router: 先后尝试v3.13.2-hotfix2、v2.10.2、v3.6.1版本
• 核心代码片段：

import JSBI from 'jsbi'; //v3.2.5
import { CurrencyAmount, Percent, ChainId as SupportedChainId, Token, TradeType } from '@uniswap/sdk-core'; //v4.0.1
import { AlphaRouter, ChainId, SwapType, SwapOptionsSwapRouter02  } from '@uniswap/smart-order-router'; //v3.13.2-hotfix2

const fromReadableAmount = (amount: number, decimals: number) => {
    const extraDigits = Math.pow(10, countDecimals(amount))
    const adjustedAmount = amount * extraDigits
    return JSBI.divide(
        JSBI.multiply(
            JSBI.BigInt(adjustedAmount),
            JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(decimals))
        ),
        JSBI.BigInt(extraDigits)
    )
};

const options: SwapOptionsSwapRouter02 = {
    recipient: authStore.getWallet as string,
    slippageTolerance: new Percent(50, 10_000),
    deadline: Math.floor(Date.now() / 1000 + 1800),
    type: SwapType.SWAP_ROUTER_02
}

// 后续AlphaRouter初始化及route调用代码...

生产环境压缩代码中错误对应位置：

var n = e(l4), S = n.BigInt(0), N = n.BigInt(1); // 此处n.BigInt调用失败

解决方案建议 #

1. 配置Nuxt3打包规则，避免JSBI被过度压缩 #

在nuxt.config.ts中添加build配置，确保JSBI及Uniswap相关依赖的类和方法名不被压缩混淆：

export default defineNuxtConfig({
  build: {
    transpile: ['jsbi', '@uniswap/sdk-core', '@uniswap/smart-order-router'],
    terser: {
      compress: {
        keep_fnames: true,
        keep_classnames: true
      }
    }
  }
})

2. 修改JSBI导入方式 #

将默认导入改为全量导入，确保JSBI的完整实例被正确引入：

import * as JSBI from 'jsbi';

3. 降级@uniswap/sdk-core版本 #

v4.0.1版本可能与Nuxt3的打包机制存在兼容性问题，尝试降级到v3.x稳定版本（如v3.1.0），该版本对JSBI的依赖逻辑更适配前端打包工具。

4. 确保Uniswap相关代码仅在客户端执行 #

Uniswap SDK依赖浏览器环境的Web3能力，避免代码在服务端渲染阶段执行。在触发交易的函数中添加客户端环境判断：

const handleSwap = async () => {
  if (!process.client) return;
  // 原有的Swap逻辑代码
}

或使用Nuxt3的<client-only>组件包裹触发按钮所在的DOM区域。

5. 优化Vite依赖预构建配置 #

在nuxt.config.ts中配置Vite预构建JSBI，确保依赖被正确处理：

export default defineNuxtConfig({
  vite: {
    optimizeDeps: {
      include: ['jsbi']
    }
  }
})

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