Build failed for: "ERROR: Big integer literals are not available in the configured target environment" with Ionic + React + Vite

[lags]

When try to launch yarn build build stuck with error.

rendering chunks (9)...
[vite:esbuild-transpile] Transform failed with 4 errors:
assets/index-!~{001}~.js:13263:5712: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides)
assets/index-!~{001}~.js:13263:5716: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides)
assets/index-!~{001}~.js:13263:5725: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides)
assets/index-!~{001}~.js:13263:5729: ERROR: Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides)

Big integer literals are not available in the configured target environment ("chrome64", "edge79", "es2020", "firefox67", "safari12" + 3 overrides)
...more log error...

For reproduce I use:
ionic start photo-gallery tabs --type=react --capacitor
cd photo-gallery
npm install mqtt --save

Inside App.tsx:
import mqtt from 'mqtt';
and in useEffect hook:

useEffect(() => {
  const _mqtt = mqtt.connect({});
}, []);

If I remove or comment const _mqtt = mqtt.connect({}); build successfully

As workaround I am using mqtt library throught cdn (putting script tag inside index.html) and call by window.mqtt.connect({})

Any suggest for fix it is appreciate

[robertsLando]

Tried to check: https://stackoverflow.com/questions/75576741/how-to-solve-error-big-integer-literals-are-not-available-in-the-configured-tar ?

[lags]

I just tried but the error is same

[lags]

I solved disabled legacy plugin edit config with:

export default defineConfig({
    ....
    build: {
        target: ['esnext']
    },
    plugins: [
      ....
      legacy({
        renderLegacyChunks: false,
      }),
      ....
    ],
    ....
});

[LiuZiqi-dual]

By the way, in addition to adding the configuration mentioned by @lags above, I also had to add the following configuration for it to run correctly.

vite.config.ts

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

[robertsLando]

I don't need to add any of that setting when using with vite, are you using latest?

[jdutchak]

life saver

[robertsLando]

The workaround should not be needed anymore after this is merged: #1963