How to solve error "Big integer literals are not available in the configured target environment" on vite?

I am using vite, react and typescript then i got this error, anyone knows how to solve it ?

Here is my 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"
  }
}

Logs:

> ✘ [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")
> node_modules/bigint-mod-arith/dist/esm/index.browser.js:27:26: 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:47:13: 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:47:24: ERROR:
> Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") ...
> at failureErrorWithLog
> [...]

I tried, deleting node_modules and pnpm-lock-yaml and reinstalling them but the problem is still there.

I solved it on vite 3.2.x and 4.1.x (with Svelte instead of React, but it should work) by defining the following vite config's options:

• optimizeDeps.esbuildOptions.target
• optimizeDeps.global
• optimizeDeps.esbuildOptions.supported.bigint
• build.target

import { defineConfig } from "vite";
// import react, svelte and other needs...

// https://vitejs.dev/config/
export default ({ mode }) => {

  return defineConfig({
    
    optimizeDeps: { // 👈 optimizedeps
      esbuildOptions: {
        target: "esnext", 
        // Node.js global to browser globalThis
        define: {
          global: 'globalThis'
        },
        supported: { 
          bigint: true 
        },
      }
    }, 

    build: {
      target: ["esnext"], // 👈 build.target
    },
  })
}

Simplified the @flydev answer a bit:

vite.config.ts

export default defineConfig({
// ...
build: {
target: 'esnext', // you can also use 'es2020' here
},
optimizeDeps: {
esbuildOptions: {
target: 'esnext', // you can also use 'es2020' here
},
},
})

Also, make sure your Typescript target is high enough:

tsconfig.json

"compilerOptions": {
"target": "ES2020", // you can also use higher value
// ...
}