fix(bundling): check for browserslist when setting terser ecma #17620

[Coly010]

Current Behavior

We do not check browserslist files in the withNx helper.

This can lead to outputs that are not compatible with the targetted browsers

Expected Behavior

We should let browserslist help define the ecma version for terser to use

Related Issue(s)

Fixes #17620

Notes

An improvement could be to find a method to determine the lowest ecma version based on all the browsers matching the browserslist queries

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nx-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 21, 2023 5:22pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2b1d53e. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx affected -t e2e-macos --parallel=1 --base=5af50b966e0fcf1ce99779b7adb1aaf53e486518 --head=2b1d53e5581ca285c32f87400449cde3a5cc1dce

---

Sent with 💌 from NxCloud.

[kevinbeal]

Thank you guys for doing this!

This may just be nitpicky stuff I'm bringing up, but the browser I discovered the issue on was a version of Safari, so while this is certainly an improvement, it wouldn't fix the issue for browserlists targeting older Safari but not IE11 (since the fix only checks for IE11 and otherwise picks es2020). Of course, I can just target IE11 and thus also cover old Safari, but I thought I would mention it anyway.

[Coly010]

@kevinbeal Do you know what version of Safari it is? I can add it to an array of browsers to change to ES5.

There's no good way to get the ecmascript version that works across all the browsers found with browserlist unfortunately.

[kevinbeal]

@kevinbeal Do you know what version of Safari it is? I can add it to an array of browsers to change to ES5.

It was 13.0 on desktop and 13.3 on mobile (admittedly with small market shares), but Android 4.4.4 is affected too (with a slightly larger market share).

A quick look at the Terser source gives the impression that optional chaining and nullish coalescing are the only two compression checks they do beyond ecma2015 and both were introduced at the same time in each browser. There doesn't appear to be any benefit to es2016/17/18/etc checking.

There's no good way to get the ecmascript version that works across all the browsers found with browserlist unfortunately.

I noticed that too. I wonder why not. Seems like an obvious feature, but maybe that's just hindsight or my ignorance speaking 😅

[Coly010]

I noticed that too. I wonder why not. Seems like an obvious feature, but maybe that's just hindsight or my ignorance speaking 😅

@kevinbeal It's because some browsers introduced partial support for modern ES features and not total feature parity with each ES spec

Thanks for highlighting the browsers, I'll get the list of browsers updated!

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.