Vite开发模式正常，构建后运行报错n2.BigInt is not a function求助

开发与构建模式的核心差异 #

Vite开发模式依赖esbuild做快速转译和依赖预构建，处理逻辑偏向按需即时转译；而构建模式使用Rollup做打包，结合esbuild完成代码压缩/转译，对模块的处理更严格——尤其是CommonJS转ES模块、polyfill注入、代码降级等环节的逻辑，和开发模式完全不同，这是两者表现差异的根本原因。

报错原因及对应解决方案 #

1. Legacy插件过度转译改写BigInt #

你配置中启用的legacy()插件，会自动为旧浏览器生成降级代码，但如果配置不当，可能把原生BigInt转译为不存在的函数调用（比如报错中的n2.BigInt）。

解决方案：
调整legacy插件的目标浏览器范围，排除不支持BigInt的老旧浏览器（如IE11），同时禁用不必要的自动polyfill：

legacy({
  targets: ['defaults', 'not IE 11'], // 仅针对支持ES2020的主流浏览器
  additionalLegacyPolyfills: [] // 避免自动注入冗余polyfill干扰原生API
})

2. 构建模式未同步BigInt支持配置 #

你在optimizeDeps.esbuildOptions中开启了bigint支持，但该配置仅作用于开发模式的依赖预构建。构建模式的esbuild转译逻辑未同步设置，导致Rollup打包时BigInt相关代码被错误处理。

解决方案：
在build.esbuildOptions中添加相同的BigInt支持配置：

build: {
  // ...现有配置
  esbuildOptions: {
    target: "es2020",
    supported: {
      bigint: true,
    },
  },
}

3. Node Polyfills与CommonJS插件冲突 #

你同时启用了nodePolyfills()和commonjs()插件，两者在处理CommonJS模块转译时可能产生冲突，导致BigInt的polyfill未正确注入或被覆盖。

解决方案：
尝试移除commonjs()插件，因为nodePolyfills()已内置CommonJS模块的处理能力；如果必须保留，可调整插件顺序，将nodePolyfills()放在commonjs()之后。

4. WalletConnect依赖的转译异常 #

你启用transformMixedEsModules是为了兼容@walletconnect/web3-provider，但该配置可能导致该依赖中的BigInt代码被错误转译。

解决方案：
针对该依赖单独处理，在Rollup配置中排除它的转译，或使用自定义插件调整转译逻辑：

build: {
  rollupOptions: {
    // 若该依赖已预构建为兼容格式，可直接排除转译
    external: ['@walletconnect/web3-provider'],
    // 或使用自定义插件保留BigInt
    plugins: [
      {
        name: 'walletconnect-transform',
        transform(code, id) {
          if (id.includes('@walletconnect/web3-provider')) {
            return code.replace(/BigInt/g, 'window.BigInt');
          }
        }
      }
    ]
  }
}

验证步骤 #

1. 临时注释legacy()插件，构建后测试是否仍报错，快速定位是否为该插件导致的问题。
2. 查看构建产物中的报错代码片段，确认n2.BigInt是由哪个转译步骤生成的。
3. 检查@walletconnect/web3-provider的源码，确认其BigInt的使用方式是否需要特殊兼容。

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