Big integer literals are not available in the configured target environment

[fabis94]

Describe the bug

I'm using @vitejs/plugin-legacy to enable support for older browser versions (chrome65 specifically) and after upgrading to nuxt 3.5.3, which apparently has BigInts in its code, I can no longer build the app because of the following error:

#31 102.0 ➤ YN0000: Nuxi 3.5.3
#31 102.0 ➤ YN0000: Nuxt 3.5.3 with Nitro 2.5.0
#31 104.1 ➤ YN0000: ℹ Using Tailwind CSS from ~/assets/css/tailwind.css
#31 107.0 ➤ YN0000: ℹ Building client...
#31 107.0 ➤ YN0000: ℹ vite v4.3.9 building for production...
#31 107.3 ➤ YN0000: ℹ transforming...
#31 134.2 ➤ YN0000: ℹ ✓ 5650 modules transformed.
#31 135.3 ➤ YN0000: ℹ rendering chunks...
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000:  ERROR  [vite:esbuild-transpile] Transform failed with 2 errors:
#31 136.1 ➤ YN0000: _nuxt/entry.!~{001}~.js:10665:80: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: _nuxt/entry.!~{001}~.js:10666:66: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: 10663|  const revivers = {
#31 136.1 ➤ YN0000: 10664|    NuxtError: (data) => createError(data),
#31 136.1 ➤ YN0000: 10665|    EmptyShallowRef: (data) => shallowRef(data === "_" ? void 0 : data === "0n" ? 0n : JSON.parse(data)),
#31 136.1 ➤ YN0000:    |                                                                                  ^
#31 136.1 ➤ YN0000: 10666|    EmptyRef: (data) => ref(data === "_" ? void 0 : data === "0n" ? 0n : JSON.parse(data)),
#31 136.1 ➤ YN0000: 10667|    ShallowRef: (data) => shallowRef(data),
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: 10664|    NuxtError: (data) => createError(data),
#31 136.1 ➤ YN0000: 10665|    EmptyShallowRef: (data) => shallowRef(data === "_" ? void 0 : data === "0n" ? 0n : JSON.parse(data)),
#31 136.1 ➤ YN0000: 10666|    EmptyRef: (data) => ref(data === "_" ? void 0 : data === "0n" ? 0n : JSON.parse(data)),
#31 136.1 ➤ YN0000:    |                                                                    ^
#31 136.1 ➤ YN0000: 10667|    ShallowRef: (data) => shallowRef(data),
#31 136.1 ➤ YN0000: 10668|    ShallowReactive: (data) => shallowReactive(data),
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000: ℹ ✓ built in 29.09s
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000:  ERROR  Transform failed with 2 errors:
#31 136.1 ➤ YN0000: _nuxt/entry.!~{001}~.js:10665:80: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: _nuxt/entry.!~{001}~.js:10666:66: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000: 
#31 136.1 ➤ YN0000:   _nuxt/entry.!~{001}~.js:10665:80: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000:   _nuxt/entry.!~{001}~.js:10666:66: ERROR: Big integer literals are not available in the configured target environment ("chrome65", "edge88", "es2020", "firefox78", "safari14" + 2 overrides)
#31 136.1 ➤ YN0000:   at failureErrorWithLog (node_modules/esbuild/lib/main.js:1636:15)
#31 136.1 ➤ YN0000:   at node_modules/esbuild/lib/main.js:837:29
#31 136.1 ➤ YN0000:   at responseCallbacks.<computed> (node_modules/esbuild/lib/main.js:697:9)
#31 136.1 ➤ YN0000:   at handleIncomingPacket (node_modules/esbuild/lib/main.js:752:9)
#31 136.1 ➤ YN0000:   at Socket.readFromStdout (node_modules/esbuild/lib/main.js:673:7)
#31 136.1 ➤ YN0000:   at Socket.emit (node:events:513:28)
#31 136.1 ➤ YN0000:   at Socket.emit (node:domain:489:12)
#31 136.1 ➤ YN0000:   at addChunk (node:internal/streams/readable:315:12)
#31 136.1 ➤ YN0000:   at readableAddChunk (node:internal/streams/readable:289:9)
#31 136.1 ➤ YN0000:   at Socket.Readable.push (node:internal/streams/readable:228:10)

I've tried adjusting the configuration of @vitejs/plugin-legacy, even enabling all polyfills w/ modernPolyfills: true, but it doesn't help. Support for chrome65 is a requirement in this case so I can't just target a newer chrome version.

Why isn't vite and @vitejs/plugin-legacy able to transpile away the BigInt back into a basic number? How can I resolve this in a way that I can keep chrome65 support?

Reproduction

specklesystems/speckle-server#1647

Steps to reproduce

See PR description

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 18.69 GB / 31.35 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.asdf/installs/nodejs/18.16.0/bin/node
    Yarn: 3.2.0 - ~/.asdf/installs/nodejs/18.16.0/bin/yarn
    npm: 9.5.1 - ~/.asdf/plugins/nodejs/shims/npm
  npmPackages:
    @vitejs/plugin-legacy: ^4.0.3 => 4.0.3 
    nuxt: ^3.5.3 => 3.5.3 
    vite: ^4.3.9 => 4.3.9

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Vite itself doesn't support transpiling BigInt as it's not supported by esbuild. plugin-legacy supports transpiling BigInt for legacy chunks. But you are disabling that.

If you want to transpile BigInt for modern chunks, I guess running babel-plugin-transform-jsbi-to-bigint with @rollup/plugin-babel would work.

[Droutin]

Hi, can you provide example?

[skratchdot]

I just ran into this as well. plugin-legacy will not build this:

console.log(256n);

but it WILL build this:

console.log(BigInt(256));

Example:
https://stackblitz.com/edit/vitejs-vite-apgdom?file=src%2Fmain.tsx

[Tarryco]

Hi, Did you finally find a solution?

[skratchdot]

@Tarryco - my solution was swapping out the library that was using BigInt (so the issue stopped happening for my project). I did not find a solution or work on a "real fix".

[amcs99]

Any workaround for this problem?

[sbeben]

those errors randomly started to appear and break prod build after I've changed nothing literally in my project

[ttv20]

someone solved it?

[dmatora]

Experiencing same problem
My app uses wagmi which uses @viem/actions/public, which has code like previousBlockNumber + 1n which crashes build when using plugin-legacy with Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 2 overrides)
I wonder if this has any solution

[Tarryco]

Hi, In what way did you solve the problem?

[dmatora]

Unfortunately I don't remember how it was solved and if it was me or another team member - was too long time ago / too many projects / issues since then.
Checked project repo and don't see a trace of the issue.

[wildcommunist]

has anyone else managed to solve this? Having this issue with quasar and polkadot api