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

huangapple go评论73阅读模式
英文:

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

问题

这是您提供的错误信息的翻译:

✘ [错误] 大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") 中不可用

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

✘ [错误] 大整数字面量在配置的目标环境 ("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] 在更新依赖项时发生错误:错误:构建失败,有 68 个错误:
node_modules/bigint-mod-arith/dist/esm/index.browser.js:21:14: 错误:
大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") 中不可用
node_modules/bigint-mod-arith/dist/esm/index.browser.js:27:20:
错误:
大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") 中不可用
node_modules/bigint-mod-arith/dist/esm/index.browser.js:27:26: 错误:
大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") 中不可用
node_modules/bigint-mod-arith/dist/esm/index.browser.js:47:13: 错误:
大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") 中不可用
node_modules/bigint-mod-arith/dist/esm/index.browser.js:47:24: 错误:
大整数字面量在配置的目标环境 ("chrome87", "edge88", "es2019", "firefox78", "safari13.1") ...

您尝试删除 node_modulespnpm-lock-yaml,然后重新安装它们,但问题仍然存在。

英文:

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.

答案1

得分: 6

我在 vite 3.2.x4.1.x(使用 Svelte 而不是 React,但应该也适用)中解决了这个问题,通过定义以下 vite 配置选项:

  • optimizeDeps.esbuildOptions.target
  • optimizeDeps.global
  • optimizeDeps.esbuildOptions.supported.bigint
  • build.target
import { defineConfig } from "vite";
// 导入 React、Svelte 和其他需要的内容...

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

  return defineConfig({
    
    optimizeDeps: { // 优化依赖项
      esbuildOptions: {
        target: "esnext", 
        // 从 Node.js 全局到浏览器的 globalThis
        define: {
          global: 'globalThis'
        },
        supported: { 
          bigint: true 
        },
      }
    }, 

    build: {
      target: ["esnext"], // 构建目标
    },
  })
}
英文:

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

答案2

得分: 3

vite.config.ts

export default defineConfig({
  // ...
  build: {
    target: 'esnext', // 你也可以在这里使用 'es2020'
  },
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext', // 你也可以在这里使用 'es2020'
    },
  },
})

Also, make sure your Typescript target is high enough:

tsconfig.json

"compilerOptions": {
  "target": "ES2020", // 你也可以使用更高的值
  // ...
}
英文:

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

huangapple
  • 本文由 发表于 2023年2月27日 12:17:54
  • 转载请务必保留本文链接:https://go.coder-hub.com/75576741.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定