Terser plugin set to 2020, thus shortening using nullish coalescing operator despite browserslist

[kevinbeal]

Current Behavior

Including code that Terser can shorten using ?? syntax will be shortened thus due to the choice of ecma value 2020 in the TerserPlugin options in the @nx/webpack package. This is despite any .browserslistrc configuration we choose.

Expected Behavior

I would expect to be able to build projects without the nullish coalescing operator in my build output. Preferably there would be some way to adjust the plugin options to the TerserPlugin. Or maybe a different/older value chosen based on Nrwl's chosen level of support. I see that you've officially stopped supporting IE11, so something like es2015 or es2016.

GitHub Repo

https://github.com/kevinbeal/nx-examples

Steps to Reproduce

1. Write some code or include a package that would be shortened using ?? by terser, like so:

function isIndex(value, length) {
  const type = typeof value;
  const MAX_SAFE_INTEGER = 9007199254740991;
  const reIsUint = /^(?:0|[1-9]\d*)$/;
  length = length == null ? MAX_SAFE_INTEGER : length;
  return !!length && (type === "number" || type !== "symbol" && reIsUint.test(value)) && value > -1 && value % 1 === 0 && value < length;
}

2. Build with optimization flag turned on so that TerserPlugin is used.
3. Observe the build output contains nullish coalesing operator

Nx Report

Node   : 16.5.0
   OS     : darwin-arm64
   yarn   : 1.22.19
   
   nx                 : 16.4.0-beta.3
   @nx/js             : 16.4.0-beta.3
   @nx/jest           : 16.4.0-beta.3
   @nx/linter         : 16.4.0-beta.3
   @nx/workspace      : 16.4.0-beta.3
   @nx/angular        : 16.4.0-beta.3
   @nx/cypress        : 16.4.0-beta.3
   @nx/devkit         : 16.4.0-beta.3
   @nx/eslint-plugin  : 16.4.0-beta.3
   @nx/react          : 16.4.0-beta.3
   @nrwl/tao          : 16.4.0-beta.3
   @nx/web            : 16.4.0-beta.3
   @nx/webpack        : 16.4.0-beta.3
   nx-cloud           : 16.0.5
   typescript         : 5.0.4
   ---------------------------------------
   Community plugins:
   @ngrx/component-store : 16.0.0
   @ngrx/effects         : 16.0.0
   @ngrx/entity          : 16.0.0
   @ngrx/router-store    : 16.0.0
   @ngrx/store           : 16.0.0
   @ngrx/store-devtools  : 16.0.0

Failure Logs

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

A custom webpack config can be used to overwrite the ecma value, like so:

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
module.exports = composePlugins(
  withNx(),
  withReact(),
  (config, { options, context }) => {
    config.optimization.minimizer[0].options.minimizer.options.ecma = "2015"; // <---here
    return config;
  }
);

Not that I would recommend this.

[kevinbeal]

To anyone coming here in the future, if you want to target anything between es2015 and es2020, the above fix would require you to target es2015 by adding IE 11 in your browserslist config. This is only any issue though if the minified code outputs es2020 which, at first glance, appears uncommon.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.