Vite React TS项目开发正常，构建预览时出现BigInt is not a function错误

问题场景 #

项目在开发环境（npm run dev）完全正常，无任何报错；npm run build能顺利完成，但执行以下命令后：

npm run build
npm run preview

抛出以下错误：

index-02ef721e.js:127068 Uncaught TypeError: r2.BigInt is not a function
    at index-02ef721e.js:127068:327
    at assets/index-02ef721e.js (index-02ef721e.js:128109:7)
    at __require (index-02ef721e.js:5:50)
    at index-02ef721e.js:244853:16

当前使用的配置文件如下：

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      process: "process/browser",
      stream: "stream-browserify",
      util: 'util'
    }
  },
  build: {
    minify: false,
    target: "es2020", // Enable Big integer literals
    commonjsOptions: {
      transformMixedEsModules: true, // Enable @walletconnect/web3-provider which has some code in CommonJS
    },

    rollupOptions: {
      // maxParallelFileOps: 2,
      cache: false,
    },
    outDir: "dist",
  },
  plugins: [
    react(),
    nodePolyfills({
      // To add only specific polyfills, add them here. If no option is passed, adds all polyfills
      include: ['path', 'https'],
      // To exclude specific polyfills, add them to this list. Note: if include is provided, this has no effect
      exclude: [
        'fs', // Excludes the polyfill for `fs` and `node:fs`.
      ],
      // Whether to polyfill specific globals.
      globals: {
        Buffer: true, // can also be 'build', 'dev', or false
        global: true,
        process: true,
      },
      // Whether to polyfill `node:` protocol imports.
      protocolImports: true,
    })],
    optimizeDeps: {
      esbuildOptions: {
        target: "es2020", // Enable Big integer literals
        define: {
          global: "globalThis",
        },
        supported: {
          bigint: true,
        },
      },
    },
})

tsconfig.json #

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "ESNext", "DOM", "DOM.Iterable"],
    "module": "CommonJS",
    "skipLibCheck": true,
    "esModuleInterop": true,
    /* Bundler mode */
    // "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

解决方案 #

1. 调整构建目标与ESBuild配置 #

将build.target和optimizeDeps.esbuildOptions.target统一改为esnext，确保所有ES2020+特性被完整支持；同时添加keepNames: true防止变量名被混淆：

// vite.config.js 中修改对应部分
build: {
  target: "esnext",
  // ...其他配置
},
optimizeDeps: {
  esbuildOptions: {
    target: "esnext",
    keepNames: true,
    // ...其他配置
  },
},

2. 修正TypeScript模块配置 #

Vite项目更适合使用ES模块规范，将tsconfig中的module改为ESNext并启用bundler模块解析：

// tsconfig.json 中修改对应部分
"module": "ESNext",
"moduleResolution": "bundler",

3. 补充CommonJS转译处理 #

添加Rollup的CommonJS插件，确保第三方CommonJS库被正确转译：
首先安装依赖：

npm install @rollup/plugin-commonjs --save-dev

然后在vite.config.js中引入并配置：

import commonjs from '@rollup/plugin-commonjs'

// 在build.rollupOptions.plugins中添加
rollupOptions: {
  cache: false,
  plugins: [commonjs()]
},

4. 全局BigInt兼容性处理（可选） #

如果需要兼容不支持原生BigInt的旧浏览器，在项目入口文件（如src/main.tsx）添加全局声明：

if (typeof BigInt === 'undefined') {
  // 需先安装 bigint-polyfill
  // npm install bigint-polyfill --save
  (globalThis as any).BigInt = require('bigint-polyfill');
}

验证步骤 #

1. 删除dist文件夹和node_modules/.vite缓存目录
2. 重新执行npm run build && npm run preview
3. 检查页面是否正常加载，无BigInt相关报错

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