npmreactjs80% confidence\u2191 6

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

Full error message
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 }, }) }

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/b9cf39ee0a4333679f7759868418d68d2061f686b72a3c8caf9c6551cb1270c6
hash \u00b7 b9cf39ee0a4333679f7759868418d68d2061f686b72a3c8caf9c6551cb1270c6
How to solve error "Big integer literals are not availa… — DepScope fix | DepScope