Using defaults in .browserslistrc with @babel/preset-env

Question

I was reviewing Babel's docs for @babel/preset-env, and noticed this note:

Please note that if you are relying on browserslist's defaults query (either explicitly or by having no browserslist config), you will want to check out the No targets section for information on preset-env's behavior.

And here's an excerpt from the referenced No targets section.

When no targets are specified: Babel will assume you are targeting the oldest browsers possible. For example, @babel/preset-env will transform all ES2015-ES2020 code to be ES5 compatible.

Because of this, Babel's behavior is different than browserslist: it does not use the defaults query when there are no targets are found in your Babel or browserslist config(s). If you want to use the defaults query, you will need to explicitly pass it as a target:

The line that confuses me: "it does not use the defaults query when there are no targets are found in your Babel or browserslist config(s)". If there is a defaults query in the .browserslistlrc, wouldn't that mean there is a target in the browserslist config? And isn't the whole point of a .browserslistrc file to have a centralized location to reference your target browsers? Maintaining two separate locations seems error prone.

I decided to investigate and turned on the debug flag for Babel. At this point my .babelrc file had no explicit targets listed, and my .browserslistrc just listed defaults. I got the following output in the terminal when running Babel:

Using targets:
{}

When I added an explicit "targets": "defaults" to .babelrc, the output changed and the target browsers were now listed:

Using targets:
{
  "android": "84",
  "chrome": "83",
  "edge": "84",
  "firefox": "78",
  "ie": "11",
  "ios": "12",
  "opera": "70",
  "safari": "13.1",
  "samsung": "11.1"
}

To add to my confusion, this list doesn't match the defaults that browserslist reports when you run npx browserslist defaults:

and_chr 97
and_ff 96
and_qq 10.4
and_uc 12.12
android 97
baidu 7.12
chrome 98
chrome 97
chrome 96
edge 98
edge 97
edge 96
firefox 96
firefox 95
firefox 91
firefox 78
ie 11
ios_saf 15.2-15.3
ios_saf 15.0-15.1
ios_saf 14.5-14.8
ios_saf 14.0-14.4
ios_saf 12.2-12.5
kaios 2.5
op_mini all
op_mob 64
opera 83
opera 82
safari 15.2-15.3
safari 15.1
safari 14.1
samsung 16.0
samsung 15.0

Can anyone clarify what's going on here, and recommend a best practice if you use the defaults browserslist query with @babel/preset-env?

score 2 · Answer 1 · answered Jul 27 '22 at 14:44

This is a known issue with Babel 7:

https://github.com/babel/babel/issues/10965

Closing this as duplicate of #9962 , it is fixed in #10897. However we can not ship it until Babel 8 because it is a breaking change.

As a workaround, you can specify defaults again in targets.browsers. We recognize that it is not ideal but could not ship in Babel 7 because we are changing the behaviour of default options.

There is a suggested workaround until Babel 8 is released:

For those stumbling on the same issue, I got around it by "expliciting" defaults. Meaning I put > 0.5%, last 2 versions, Firefox ESR, not dead in my .browserslist file. Works fine.

Using defaults in .browserslistrc with @babel/preset-env

1 Answers1