Default NX13 React app production bundle does not work in IE11

Current Behavior

When adding IE 11 as a line item in the .browserslistrc file (as per the docs) and running a production build via nx build, I can see the dist folder output containing the expected *.esm.js and *.es5.js files. However the ES5 files still contain arrow functions thus breaking IE11 compatibility which is throwing syntax errors when loading the ES5 files.

Expected Behavior

I expect (as is asserted by the docs) that adding the IE11 browserslist item, the build output correctly transpiles the source code into an ES5 compatible output that runs in IE11 without syntax errors.

I have not personally used NX prior to version 13 so not entirely sure if it’s a regression. I have seen some (closed) Github issues around this topic dating back to NX 10 but have no hands on experience with this.

Steps to Reproduce

1. npm install -g nx
2. npx create-nx-workspace --preset=react
3. Edit apps/{yourApp}/.browserslistrc file to include IE 11 as per https://nx.dev/l/r/guides/browser-support#adding-support-for-ie-11
4. nx build
5. Try to run dist output in IE11 or inspect es5 files in dist folder which also shows the arrow functions still being in the transpiled output.

Full reproduction available at: https://github.com/jannisg/nx-ie11-repro

Just run:

1. npm ci
2. nx build
3. inspect the es5 files or run dist output and load in IE11 browser

Failure Logs

There are no explicit errors during the build, the output is generated but contains invalid syntax.

Example of issue

Arrow function contained in production build ES5 asset

Looking at the above ES5 output without optimisations enabled (ESM output) it appears that the arrow function is part of the webpack generated code:

IE11 Syntax error (expected given the arrow functions in the output)

Environment

>  NX  Report complete - copy this into the issue template

  Node : 14.16.0
  OS   : darwin x64
  npm  : 6.14.11
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 13.1.4
  @nrwl/cypress : 13.1.4
  @nrwl/devkit : 13.1.4
  @nrwl/eslint-plugin-nx : 13.1.4
  @nrwl/express : Not Found
  @nrwl/jest : 13.1.4
  @nrwl/linter : 13.1.4
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 13.1.4
  @nrwl/schematics : Not Found
  @nrwl/tao : 13.1.4
  @nrwl/web : 13.1.4
  @nrwl/workspace : 13.1.4
  @nrwl/storybook : 13.1.4
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[LeoLeal]

@ymor I have moved on from the project, so I dont have access to the codebase anymore to paste an example based on It, but essentially what I did was while extending webpack configuration, I placed a conditional on the ES5 one (it’s available in the node-js runtime during build… if I remember well, in the config variable. just place some console logs in there and you will see the whole thing), and forcefully set the browserlists target to es5-only, and added a new mjs rule that copies the normal js rule from nx’s webpack oob configuration. That made mjs files from apolllo client to transpile to es5.

[jannisg]

It’s worth mentioning that setting config.target to either explicitly 'browserslist' or deleting the target property entirely (delete config.target) in a custom webpack wrapper (as above) which is mentioned in the migration docs @bansalrachita mentions above, ensures the browserslist config is correctly applied.

With the config.target = "browserslist" set, and the .browserslistrc file containing IE 11, it will produce valid .es5.js files. Without the IE 11 line in .browserslistrc it will only generate .esm.js files.

It appears to me like the baseline configuration for NX’s webpack config should be changed to config.target: "browserslist".