How to use preset-env in ES2020

[josemigallas]

According to the docs, babel-plugin-proposal-nullish-coalescing-operator is included in babel/preset-env in ES2020. But what does this mean? How can it be enabled?

I added browserslist to my package.json and set browserslistConfigFile: true in babel.config.js, with the following support:

"browserslist": [
  "chrome >= 107",
  "firefox >= 105",
  "edge >= 107"
],

And still I keep getting errors like:

ERROR in ./app/javascript/packs/invoice_payment.ts 86:40
Module parse failed: Unexpected token (86:40)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   card.on('change', event => {
|     payButton.disabled = !event.complete;
>     cardError.textContent = event.error?.message ?? '';
|   });
|   form.addEventListener('submit', function (event) {

[JLHwung]

"browserslist": [
  "chrome >= 107",
  "firefox >= 105",
  "edge >= 107"
]

Your target already supports ?., that's why preset-env does not enable the transform for you. However, in your case, the webpack 4 does not support it. Please upgrade to webpack 5.

If you are stuck at webpack 4, you can use include to always enable ?. transform, though the output code will be slightly bigger than what it supposed to be.

["@babel/preset-env", { "include": [ "proposal-optional-chaining" ] }]

[josemigallas]

I see, and good point I should upgrade webpack ASAP.

My question though would still be: is there an explicit way of setting ES2020 as target for Babel?

[nicolo-ribaudo]

No, because ECMAScript version don't correspond in practice with real-world engines or tools. We used to have "yearly presets", but they have been removed. If you really want to enable a specific ECMAScript version, you could manually list the corresponding plugins.

[JLHwung]

is there an explicit way of setting ES2020 as target for Babel

Nope. We are not planning to support it at this moment as browser versions are more friendly to end users than a technical term like ES2020.