Full es2020 compatibility by default

[lgarron]

Description

I help maintain a library that requires es2020 syntax (e.g. import.meta.url and bignum support). We'd love to recommend Vite as a bundler that works "out of the box" with batteries included, but this doesn't quite work because the default Vite target is es2019. Our goal is to make it as easy as possible to use our library with little programming experience, and we would really like to suggest a bundler that can be run directly without configuring anything.

The main README.md history says that es2020 used to be the target — back in 2020, actually!. This was revised in d416072 but I can't find out the reasoning why.
I was able to find some discussions and suggestions to update, such as #7279 , but they don't seem to shed any light on this.

Now that it's 2022 and ES2020 is well supported in browsers, would it be possible to revise the default?
If not, could I ask for the reasoning for the current default, and what compatibility threshold might allow it to be revised in the future?

Thanks!

Suggested solution

Change the default target to es2020.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ydcjeff]

Vite 3 uses es2020 by default and it will be stable in a few days.

vite/packages/vite/src/node/constants.ts

Line 17 in f020066

'es2020', // support import.meta.url

[bluwy]

Yes Vite 2.9 doesn't target es2020 by default, but Vite 3 will.

[lgarron]

Vite 3 uses es2020 by default.

vite/packages/vite/src/node/constants.ts

Line 17 in f020066

'es2020', // support import.meta.url

Thanks!

Unfortunately, using [email protected] it seems that ES2020 code isn't necessarily compatible:

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

In fact, I'm no longer even able to get it to work using this:

// vite.config.js
export default {
  build: {
    target: "es2020",
  },
};

Are there still changes up in the air (such as changing safari13 to safari14) for Vite 3 that will allow full ES2020 to work out of the box in Vite 3, or at least big ints?

(In our case, the big int code is actually dynamically loaded, and will rarely be used. But that isn't much comfort help if the compiler doesn't allow it.)

[bluwy]

In fact, I'm no longer even able to get it to work using this:

This was a bug in Vite 2 where we used build.target for the optimizer (which was dev only and shouldn't inherit build configs). You should be able to get the same behaviour by setting optimizeDeps.esbuildOptions.target instead, which should work in both v2 and v3.

[lgarron]

As discussed in #9063 , es2020 is not fully supported by Vite 3.

If I want to ask for full es2020 compatibility out of the box, would it make more sense to ask to reopen this issue, or to file a new one?

[lgarron]

In fact, I'm no longer even able to get it to work using this:

This was a bug in Vite 2 where we used build.target for the optimizer (which was dev only and shouldn't inherit build configs). You should be able to get the same behaviour by setting optimizeDeps.esbuildOptions.target instead, which should work in both v2 and v3.

FYI, I'm still seeing this issue in v3.0.1. 😕

[patak-dev]

I think we could reopen this issue as a feature request for Vite 4. Maybe in a few months, we could already bump the modern browser's target to support BigInt.

[lgarron]

In fact, I'm no longer even able to get it to work using this:

This was a bug in Vite 2 where we used build.target for the optimizer (which was dev only and shouldn't inherit build configs). You should be able to get the same behaviour by setting optimizeDeps.esbuildOptions.target instead, which should work in both v2 and v3.

FYI, I'm still seeing this issue in v3.0.1. 😕

poke I'm still seeing this issue in Vite v3.0.4. Should I file a separate issue?

[bluwy]

Did you set optimizeDeps.esbuildOptions.target: 'es2020'? Or I think optimizeDeps.esbuildOptions.supported: { bigint: true } works too. We could bump up the defaults in Vite 4.

[lgarron]

Did you set optimizeDeps.esbuildOptions.target: 'es2020'? Or I think optimizeDeps.esbuildOptions.supported: { bigint: true } works too. We could bump up the defaults in Vite 4.

Yes, I've tried all three configs, separately and at the same time:

export default {
  build: { target: "es2020" },
  optimizeDeps: {
    esbuildOptions: { target: "es2020", supported: { bigint: true } },
  },
};

From playing around with this for an hour, it seems that Vite 3 has either undocumented behaviour and/or caching bugs, along with potentially different behaviour depending on whether a folder is passed on the commandline (compared to defaulting to the current folder). This all makes it exceedingly difficult to tell if I'm debugging properly. 😕

[lgarron]

Okay, ignoring the caching issues, it looks like there's definitely an issue with passing a root:

• es2020 target works: npx vite with source in root folder.
• es2020 target works: npx vite with source in subfolder.
• es2020 target is ignored: npx vite subfolder with source in subfolder.

[yhoungdev]

this has saved my life, thanks a lot sir God bless you

[tobq]

I'm using Vite 3.1.2
Is there any way to fix the error:
✘ [ERROR] Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari13" + 2 overrides)

without adding:

    optimizeDeps: {
        esbuildOptions: {target: "es2020"}
    },

to the vite config? Feels like a hack
Is this an issue regarding a lack of polyfill for browsers not supporting ES2020?

[jscheid]

After upgrading from Vite 2 to 3.1.3 I was getting warnings like this, using custom HMR with a mostly vanilla config:

warning: "import.meta" is not available in the configured target environment ("es2019") and will be empty

None of the solutions offered above worked for me but this (apparently undocumented) option did:

// vite.config.js
export default {
  esbuild: {
    target: "es2020"
  },
};

I have no idea what I'm doing but HMR seems to work and warnings are gone ¯\_(ツ)_/¯
Hope this helps somebody.

It would be great if Vite maintainers could shed some more light.

[justin0mcateer]

It's probably my just my ignorance, but I don't understand why it is necessary (or makes any sense) to have to set the build target it five or six places.