nx icon indicating copy to clipboard operation
nx copied to clipboard

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

Open kevinbeal opened this issue 1 year ago • 0 comments

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;
}
  1. Build with optimization flag turned on so that TerserPlugin is used.
  2. 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

  • [X] 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 avatar Jun 15 '23 16:06 kevinbeal