Big integer literals are not available in the configured target environment (vite3 + vMoney3 + vue3)

[luckelite]

hello, i have a problem using viteJS + vue 3 with v-money3. At instance time, an error is generated that prevents me from running the server or build.

This is the error that accuses, can you help me?

`Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/.pnpm/v-money3@3.21.0_vue@3.2.39/node_modules/v-money3/dist/v-money3.es.js:137:34:
  137 │     __publicField(this, "number", 0n);
      ╵                                   ~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/.pnpm/v-money3@3.21.0_vue@3.2.39/node_modules/v-money3/dist/v-money3.es.js:223:41:
  223 │       thatNum = thatNumber.getNumber() * 10n ** BigInt(diff);
      ╵                                          ~~~

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

node_modules/.pnpm/v-money3@3.21.0_vue@3.2.39/node_modules/v-money3/dist/v-money3.es.js:225:35:
  225 │       thisNum = this.getNumber() * 10n ** BigInt(diff * -1);`

[maico910]

Maybe change this line to es2021 or esnext can solve it?

https://github.com/jonathanpmartins/v-money3/blob/a19816300a37691cd4486541c6a08d29b48333ea/vite.config.js#L10

[gvaliani]

Any update about this issue?

[jonathanpmartins]

You are using "safari13", bigint is only available in safari14 and above. Take a look here: https://caniuse.com/bigint

[lanz1]

Any update about this issue?

If anyone is facing this issue, the solution is in the PR #71 Since it has been rejected, you need to clone the repo, change vite.config.js with target:es2021. Then npm install your fork and Vite will run smoothly.

[jonathanpmartins]

Why does "es2020" not work for you? It should work fine with bigint. I thought your problem was "safari13" vs "safari14". You should be able to use this library with "es2020".

[lanz1]

Why does "es2020" not work for you? It should work fine with bigint. I thought your problem was "safari13" vs "safari14". You should be able to use this library with "es2020".

Well, I don't have "safari13" anywhere in my code but I get the same error as the OP. I think that safari13 requirement is inherited from es2020. In fact, just changing to es2021 in my local version get the whole thing works.

Btw, if anyone is following my route, it will work on vite dev but not on vite build: pages with v-money3 component will not show it and the console will report a setupcontext null error. Just delete node_modules folder from local and vite will work on production too.

[diego-lipinski-de-castro]

@lanz1 can u share ur vite config? changing vite build.target to es2021 seems to affect absolute nothing

[jonathanpmartins]

@lanz1 can u share ur vite config? changing vite build.target to es2021 seems to affect absolute nothing

It isn't affected because BigInt was introduced in 'es2020', it should work fine with 'es2021'. You have probably another misconfiguration.

Can you share your configuration?

[christhofer]

This is vite.config.ts generated from npm create vite myproject, select Vue, select Typescript

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Here is the reproduction https://stackblitz.com/edit/vitejs-vite-rwxeft?file=src/App.vue

You should see this error in the terminal below

[lanz1]

@lanz1 can u share ur vite config? changing vite build.target to es2021 seems to affect absolute nothing

Yes @diego-lipinski-de-castro , it does nothing. I don't know why, but es2021 has to be changed into v-money3. I needed to build on my remote server, so i ended up making my own fork. Feel free to use it in the meantime.

In your package.json add:

"dependencies": {
        "@lanz1/v-money3": "^3.22.2"
}

When you use it in a component: import { Money3Component } from '@lanz1/v-money3'

export default defineComponent({
    components: {
        money3: Money3Component,
    }
}

Then you use normally as <money3> in your template. It will work and build in production as npm run build, but will throw the same error with npm run dev.

Sorry @jonathanpmartins for my pretty useless fork, but I could not make it work from your and i needed a quick fix.

[diego-lipinski-de-castro]

Hey @lanz1, good News, i found out how to make it work In your vite config, change build.target to es2021 or esnext, then, instead of running vite command you need to run vite build --watch

[lanz1]

@diego-lipinski-de-castro , it builds in production, but still does not work during development: npm run dev runs fine until you visit a page containing the vue component, which throws the same error:

✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

    node_modules/v-money3/dist/v-money3.mjs:158:91:
      158 │     return i > 0 ? s = n.getNumber() * 10n ** BigInt(i) : i < 0 && (a = this.getNumber() * 10n ** BigInt(i * -1)), [a, s];
          ╵                                                                                            ~~~

6:17:33 PM [vite] error while updating dependencies:
Error: Build failed with 3 errors:
node_modules/v-money3/dist/v-money3.mjs:107:22: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/v-money3/dist/v-money3.mjs:158:39: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)
node_modules/v-money3/dist/v-money3.mjs:158:91: ERROR: Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

[diego-lipinski-de-castro]

Weird, for me it works, but I'm not using the component tho, just the directive

[jonathanpmartins]

Just found this issue: https://github.com/vitejs/vite/issues/9062. Es2020 is not fully supported in Vite 3 yet. This is why you guys are getting errors where it shouldn't be any.

Please, put the following code inside your vite.config.js file:

optimizeDeps: {
  esbuildOptions: {
    target: ['es2020', 'safari14'],
  },
},

@christhofer I changed the vite.config.js file and everything worked fine. https://stackblitz.com/edit/vitejs-vite-qgtbfx?file=src%2FApp.vue

@lanz1 If you rollback to v-money3 and put the code above inside the vite.config.js file of your project, it should work fine too.

@diego-lipinski-de-castro You didn't make any misconfiguration, at the end it was a Vite problem.

Complete example:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    esbuildOptions: {
      target: ['es2020', 'safari14'],
    },
  },
  build: {
    target: ['es2020', 'safari14'],
  },
});

[lanz1]

@jonathanpmartins yes, my build target has always been target: ['es2020', 'safari14'] (or es2021, or esnext) since I first discovered this discussion, and nothing changed.

BUT... adding your snippet:

optimizeDeps: {
    esbuildOptions: {
      target: ['es2020', 'safari14'],
    },
  },

fixed the problem completely during dev stage. Cheers buddy! Thank you!

[jonathanpmartins]

The snippet is temporary, until Vite 3 has full ES2020 support.