如何解决Vite中“Big integer literals不可用于目标环境”构建错误？

我在使用Vite、React和TypeScript开发时遇到错误：Big integer literals are not available in the configured target environment，已经尝试删除node_modules和pnpm-lock.yaml后重新安装依赖，但问题依然存在。

我的package.json配置 #

{
  "name": "",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@apollo/client": "^3.7.9",
    "@composedb/cli": "^0.3.1",
    "@composedb/client": "^0.3.1",
    "@didtools/pkh-ethereum": "^0.0.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.2",
    "@mui/x-date-pickers": "^5.0.0-alpha.5",
    "cytoscape": "^3.22.1",
    "date-fns": "^2.28.0",
    "did-session": "^1.0.0",
    "graphql": "^16.6.0",
    "graphql-tag": "^2.12.6",
    "moment": "^2.29.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "web3": "^1.8.2"
  },
  "devDependencies": {
    "@types/cytoscape": "^3.19.6",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "axios": "^0.27.2",
    "typescript": "^4.6.3",
    "vite": "^2.9.9"
  }
}

错误日志 #

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

node_modules/bigint-mod-arith/dist/esm/index.browser.js:231:16:
231 │ e = e / 2n;
╵ ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

node_modules/bigint-mod-arith/dist/esm/index.browser.js:232:17:
232 │ b = b ** 2n % n;
╵ ~~

7:04:56 AM [vite] error while updating dependencies: Error: Build failed with 68 errors:
node_modules/bigint-mod-arith/dist/esm/index.browser.js:21:14: ERROR:
Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
node_modules/bigint-mod-arith/dist/esm/index.browser.js:27:20:
ERROR:
Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")
...

解决方案 #

这个错误的核心原因是当前Vite和TypeScript配置的目标环境（es2019）不支持BigInt字面量语法（比如2n这种写法），只需升级目标环境配置即可解决：

1. 修改Vite配置文件 #

在项目根目录创建或修改vite.config.ts（JS项目用vite.config.js），将编译目标升级到es2020：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  // 生产构建目标
  build: {
    target: 'es2020'
  },
  // 依赖预构建目标
  optimizeDeps: {
    esbuildOptions: {
      target: 'es2020'
    }
  }
})

2. 同步升级TypeScript编译目标 #

修改tsconfig.json，将compilerOptions.target设置为es2020，确保类型检查和实际编译规则一致：

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

额外方案（如果上述方法无效） #

如果升级目标环境后仍有问题，可以强制Vite转译bigint-mod-arith依赖：

// vite.config.ts
export default defineConfig({
  // ...其他配置
  optimizeDeps: {
    include: ['bigint-mod-arith']
  }
})

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