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

Question

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.

Comfortable

Please edit your question to include your tsconfig.json file and any other compilation configuration. Why are you targeting such old browser versions? Safari is the problem as it only got BigInt support in v14 – Maintenance

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Monjo

Answer 1

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
    },
  })
}

Dugas

Used this Vite config in a NuxtJS project and solved my static build deployment. Although i had to set my target to 'es2020' – Intractable

@Dugas may I ask how you were able to figure this out?I want to get better at debugging issues like these. – Colet

@nxmohamad create a chat room, invite me and let's have a discussion. – Dugas

@Dugas created - chat.stackoverflow.com/rooms/info/255046/… – Colet

Answer 2

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
  // ...
}

Clinkerbuilt