Nx: React application not running in IE11

[alfonsobravi]

Expected Behavior

The App to load polyfills and run in IE11, possibly in both development and prod mode.

Current Behavior

Dev mode: IE11 raises syntax errors (related to ES6 arrow functions) and stops
Prod mode: blank screen, scripts are loaded but nothing seems to be evaluated, judging from performance timeline.

Steps to Reproduce

Dev mode scenario

1. npx --ignore-existing create-nx-workspace nx-ie11-test --preset=react
2. npm serve (or yarn, for what is worth)

Scripts are loaded and evaluated:

But the resulting outcome is a syntax error pointing to the first evaluated function presenting ES6 arrow notation:

I've tried to tackle the issue from a few different angles:

• "downgrading" the target parameter value to "es5" in tsconfig.json;
• adding a "browserslist" section in package.json and make sure IE11 is explicitly listed;
• addding react-app-polyfill and cleaning node-modules/.cache before rebuilding as suggested here;

Same result 🤕

Build mode scenario

1. npx --ignore-existing create-nx-workspace nx-ie11-test --preset=react
2. npm build (or yarn, for what is worth)

Rendered page is empty and console is clean:

This time scripts are loaded but not evaluated, from what I can see.:

Any suggestions?

[vsh13]

i have encountered the same issue. Was able to get around it by putting a .babelrc inside my _frontend f_older wit this

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "forceAllTransforms": true,
        "corejs": "3.0.0",
        "targets": {
          "ie": "11"
        }
      }
    ]
  ]
}

I guess nx has a bug with Babel config. @alfonsobravi @vsavkin.

[alfonsobravi]

Thanks for the hint @vsh13, it definitely did the job for me with a simple, standalone app.
In a real world scenario though, where you might have other libraries in your monorepo your app relies on, you'd still bump in the same transpiling issues (arrow func, spread operators, ...).

Now, if I move the suggested .babelrc in the root folder (or create one in each library) IE11 is happy again, but modern browsers (Chrome, Edge, FF) are all falling apart because ReferenceError: regeneratorRuntime is not defined...
Even if I extend the targets property in the babelrc to provide versions for the other browsers...

[alfonsobravi]

Definitely a Babel configuration issue which should be addressed or documented.
This .babelrc in the root folder is now doing the job:
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry", "forceAllTransforms": true, "corejs": "3.0.0", "targets": { "browsers": "last 1 version", "ie": "11" } } ], "@babel/preset-react" ], "plugins": [ "@babel/plugin-transform-runtime" ] }
But it requires manual installation of @babel/plugin-transform-runtime and its configuration, alongside the inclusion of @babel/preset-react in the presets section.

[krizic]

@alfonsobravi still not making it work in my case :/

[alfonsobravi]

@krizic Everything seems to have taken a step back for me as well :(
While I can run "almost" every bit of my monorepo in dev/debug mode, production build is back to producing a white page with JS code pretty much ignored.
Same code, moved into a standalone CRA project, builds just fine (Immer included).
@vsavkin & team, here's a reference repo, just in case you don't want to spend too long recreating the issue: https://github.com/alfonsobravi/nx-ie11-test

[alfonsobravi]

Please refer to last commit on master branch for the aforementioned repository.
As of v 8.11.0 of nx, both apps are now working across all browsers when using yarn start {pkgName} or yarn build {pkgName} --prod.
Omitting the --prod flag still triggers the white page issue.
While I guess it's good enough for me to move forward, it still feels a tad weird and symptomatic of a fragile combination of way too many uncontrolled moving parts...

[krizic]

Using 8.11.2 and still have arrow functions and template literals left in MAIN bundle with --prod (main.xxx.es5.js). Am I doing something wrong?

[alfonsobravi]

I managed to get React, Redux, Sagas, Immer, Axios working just fine on IE11 after swapping the schematics generated content for polyfills.ts with:

import 'react-app-polyfill/stable';
import 'react-app-polyfill/ie11';

These are wrappers for core-js, nothing more (stable is actually just like the default polyfills) with just enough extra smartness attached to push it through the finish line!
I am not sure how actively maintained they are in order to be considered a reliable, long term solution for the issue... I guess the other option is to extract the logic and bake it into the schematics. @vsavkin ?

[samratshaw]

Facing the same issue in IE11.
@vsavkin Any plans on fixing this?

I am using Nx 9.1.2

[vsavkin]

@footyapps27 I'll talk to @jaysoo, who is in charge of our react story.

[jaysoo]

Taking a look at this for the next release.

[jaysoo]

For anyone running into this problem, you can edit your .browserslistrc file and remove not IE 9-11 from it. This will make the production build work with IE11.

Since we do differential loading now I think we can support IE11 in the nomodules bundle. I'll get this change into the next release.

[jaysoo]

BTW, we won't support development mode in IE11 since we target only evergreen browsers for development.

[samratshaw]

@jaysoo Updating the.browserslistrc did not help.

In IE 11 the app still renders an empty page.

When the optimization is true, the console is printing an error.

Expected Identifier

When optimization is false, there is no error on the console.

Do you have any leads as to how to support react projects in IE 11?

My current .browserslistrc looks like

> 0.5%
last 2 versions
Firefox ESR

Using the latest version of nx:

>  NX  Report complete - copy this into the issue template

  @nrwl/angular : Not Found
  @nrwl/cli : 9.2.2
  @nrwl/cypress : 9.2.2
  @nrwl/eslint-plugin-nx : 9.2.2
  @nrwl/express : Not Found
  @nrwl/jest : 9.2.2
  @nrwl/linter : 9.2.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 9.2.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 9.2.2
  @nrwl/web : 9.2.2
  @nrwl/workspace : 9.2.2
  typescript : 3.8.3

[samratshaw]

@alfonsobravi @krizic Were you guys able to make it work on IE?

[samratshaw]

@jaysoo Any luck running the apps in IE11?

[samratshaw]

@vsavkin Please help to confirm if react apps are able to build in IE 11.

[jaysoo]

@samratshaw Hmm, that's strange. That query should include IE11. I'll have to take a look at it more closely.

[mlakmal]

@jaysoo i just tried react app through nx cli. and modified browserslist to below to allow IE 9-11

when i run "npm run build xyz --prod" command it is not generating differential loading script bundles.

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11
#not IE 9-10 # For IE 9-11 support, remove 'not'.

i am not sure if nx react supports es5 vs es2015 separate bundles on build, coming from angular support i was wondering if this is supported for react apps through nx?

[mlakmal]

@jaysoo i just tried react app through nx cli. and modified browserslist to below to allow IE 9-11

when i run "npm run build xyz --prod" command it is not generating differential loading script bundles.

> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11
#not IE 9-10 # For IE 9-11 support, remove 'not'.

i am not sure if nx react supports es5 vs es2015 separate bundles on build, coming from angular support i was wondering if this is supported for react apps through nx?

never mind "npm run build --prod" command was not passing the --prod to underline command. it was resolved with usign nx build --prod

[countravioli]

@mlakmal If you are calling your nx command through npm run and want to pass args through the syntax is npm run build -- --prod Here is some info on passing args to your npm run commands https://github.com/npm/npm/pull/5518

+1 for being affected by this as well. No matter what I do in tsconfig or browserslist I can't get es6 syntax removed from the .es5.js output files (my app is barfing on the first arrow function it encounters)

NX @9.2.3

Edit: I tried the exact .browserlistrc mentioned in this commit https://github.com/nrwl/nx/pull/2718 but same thing.

[countravioli]

I got my application running in IE11 after much googling and trial and error. I came across something that sounded similar. I think the problem is not everyone publishes their modules in NPM as es5 modules.

By default babel-loader is configured to exclude everything in node_modules. This article shared the tool are-you-es5 with me.

I was able to solve this in nx by replacing the webpackConfig path in workspace.json with a custom one that extends the default one by nx. It replaces the exclude rule for babel-loader with a regex provided by are-your-es5.

1. Modify workspace.json
   project -> [YOUR_PROJECT] -> architect -> build -> options -> webpackConfig

            "webpackConfig": "./webpack.config.js",

1. npm install are-you-es5

2. create webpack.config.js at project root

const { execSync } = require('child_process');
const path = require('path');
const getWebpackConfig = require('@nrwl/react/plugins/webpack');

module.exports = (config) => {
  config = getWebpackConfig(config);

  // IE 11 Loading issues
  // certain required node_modules need to be transpiled as they are not distributed with an es5 build
  // This utility identifies those and creates a regex we can pass to babel-loader
  const bin = path.join(__dirname, '/node_modules/.bin/are-you-es5');
  const out = execSync(`node '${bin}' check . -r | tail -n 1`)

  const regexStr = out.toString().trim();
  const regex = new RegExp(regexStr);
  config.module.rules[0].exclude = regex;

  return config;
};

I obviously don't think this is a good long term solution, but I think it provides a good workaround. Also I hope it provides some clarity on how to properly resolve the issue for the more enlightened.

[zak-c-lmk]

+1 on this issue. Are there any plans for a fix?

[ghost]

+1 blank on ie

[rubennaatje]

My .browserslistrc
```# This file is used by:

1. autoprefixer to adjust CSS to support the below specified browsers

2. babel preset-env to adjust included polyfills

#

For additional information regarding the format and rule options, please see:

https://github.com/browserslist/browserslist#queries

#

For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed

0.5%
last 2 versions
Firefox ESR
IE 9-11
dead
```

Then yarn nx build frontend --prod and it works in internet explorer for me. Without any weird workarounds I guess. Maybe annoying if you're actively trying to fix a bug specific for internet explorer but eh. Not like anyone (hopefully) actively develops in internet explorer.

[puku0x]

I found buildable libraries using async/await showed regeneratorRuntime is not defined error too.

[varoot]

const bin = path.join(__dirname, '/node_modules/.bin/are-you-es5');
const out = execSync(node '${bin}' check . -r | tail -n 1)

const regexStr = out.toString().trim();
const regex = new RegExp(regexStr);
config.module.rules[0].exclude = regex;

Correct me if I'm wrong but I think there's a bug here. are-you-es5 returns RegEx string with starting and ending "/" so we need to strip these out before passing to new RegExp

const regexStr = out.toString().trim();
const regex = new RegExp(regexStr.substring(1, regexStr.length - 1));

Also this script is not Windows compatible, for Windows compatible script, we can use:

const { execSync } = require('child_process');
const path = require('path');
const getWebpackConfig = require('@nrwl/react/plugins/webpack');

module.exports = (config) => {
  config = getWebpackConfig(config);

  // IE 11 Loading issues
  // certain required node_modules need to be transpiled as they are not distributed with an es5 build
  // This utility identifies those and creates a regex we can pass to babel-loader
  const bin = path.join(__dirname, 'node_modules', '.bin', 'are-you-es5');
  const out = execSync(`"${bin}" check . -r`);

  const regexStr = out.toString().trim().split('\n').pop().trim();

  // Remove "/" from the start and end
  const regex = new RegExp(regexStr.substring(1, regexStr.length - 1));

  config.module.rules[0].exclude = regex;

  return config;
};

[ramHruday]

Tried All of the solutions, updating browserlistrc, the webpack.config fix (the command ran gave me a error), updated to latest nx tool..
All gave me Blank screen..
Is there any other way?

[ramHruday]

Got it Working !!!

Along with updating browserlistrc,( webpack.config fix explained was throwing errors), updated nx tool
and my app started rendering when i updated babel.config.json

{
  "babelrcRoots": [
    "*"
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "entry",
        "forceAllTransforms": true,
        "corejs": "3.0.0",
        "targets": {
          "browsers": "last 1 version",
          "ie": "11"
        }
      }
    ],
    "@babel/preset-react",
    "@nrwl/web/babel"
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-transform-arrow-functions",
    "graphql-tag"
  ]
}

I guess our plugins are determined by what kind of react we used...We used React es6 arrow functions and graphql tag from apollo..
Although stills some console erros and css errors are there..My app rendered..

[sushruth]

This seems to be a problem still after updating to nx 10

[ramHruday]

Upgrading 10 itself doesn't work..

• [x] Try Updating ur babel.config.json...
• [x] check error on IE..The above babel.config.json worked for me..
• [x] Find out what kindoff ES6 feature in that script error needs
• [x] to be es5'ed.
• [x] Find the babel plugin for that and update babel.config.json

[vsh13]

the autoprefixer is not working either

[sushruth]

@ramHruday Upgrading to nx 10 acually broke my projects on IE11. It would probably help to add documentation on what all IE11 configs were removed as per the announcement blog post, and how we can customize and enable them in our projects if we needed.

Sure, there are workarounds for this but my request is to have a consistent set of rules we can follow for IE11 support.

Edit: Mainly when we adjust browserslistrc, we should be able to see a working version of our project in IE11. That is not happening as of v10.

[ADobrianskiy]

I can also confirm that after migration from v9 to v10 IE stopped working at all. The reason is that the output bundle with --prod tag missing nomodule files and tags inside HTML. I agree with @sushruth that it would be nice to have a straightforward way how to handle an IE browser using NX.

JFYI: I resolved the issue on my side by updating "target" to "es2015" in tsconfig.base.json

[fetters5]

We have the same issue b/c we use the query-string package, on latest versions of nx 9 and 10, we cannot get the query-string package to transpile to es5

[sushruth]

I debugged this for a while today. I think the issue lies in the logic of isDifferentialLoadingNeeded() from

https://github.com/nrwl/nx/blob/d1f740e264e55a56edc8bd15daa5cbe40651d1f3/packages/web/src/utils/third-party/utils/build-browser-features.ts#L33-L39

I think the more appropriate way to calculate if ES5 support is needed is -

!this._es6TargetOrLater || this.isEs5SupportNeeded();

After doing this change locally, and then doing the following, -

1. Set "optimization": true for the configuration being built in workspace.json file
2. Use ie 11 in browserslist file within the app

I was able to make a production build and have it work in IE.

Edit 1: @vsavkin Can you please help understand this helper function and especially the test case below for that function? I think this is causing nx apps to break in IE 11.

https://github.com/nrwl/nx/blob/d1f740e264e55a56edc8bd15daa5cbe40651d1f3/packages/web/src/utils/third-party/utils/build-browser-features_spec.ts#L56-L66

Why should the differential loading be turned off if target is es5?

EDIT 2: This particularly seems to be affected since tsc is not used to transpile but babel is used and isModern within babel.ts is also calculated using the above function and @babel/preset-envignores browserslist when targets has{esmodules:true}` - https://babeljs.io/docs/en/babel-preset-env#targetsesmodules

EDIT 3 Seems like regeneratorRuntime as mentioned by @alfonsobravi above, is also somehow an issue since rollup is also involved in bundling. Moving import "regenerator-runtime/runtime"; from polyfills.ts to main.tsx helped fix that issue since main.tsx is the entry file for rollup. Adding that to the PR. - this turned out to be really wrong

EDIT 4 Found that the regeneratorRumtime issues in built esm files are due to useBuiltIns: 'entry' option used in @nrwl/web/babel file for @babel/preset-env plugin. Using exclude when building for modern apps according to this - https://babeljs.io/docs/en/babel-preset-env#exclude . Added that check to the PR as well.

[vaunus]

@sushruth I can confirm on my side that your fix from the PR above is causing *.es5.js artefacts to be generated correctly in the build. 👍🏻 Without your fix and on NX 10.2.0 I am not seeing these files there at all, only the *.esm.js files are present.

On an unrelated note, I was still seeing arrow functions in my vendor.*.es5.js file until the query-string package was removed.

[sushruth]

@vaunus another thing I had to do was add "es6" to "lib" in my tsconfig. But even then node_modules files are not being compiled down essentially because the babel config in @nrwl/web package excludes transpiring anything from node_modules.

[vaunus]

@sushruth Thanks, yeah I am aware of that. I already modified the excludes option as suggested above using a custom webpack config that inherits from @nrwl/web and using the regex output of npx are-you-es5 check . -r. Even with this in place there were still arrow functions in my vendor bundle. In the end it was just easier to remove query-string 🙂

[sushruth]

@vaunus that may be better in multiple ways. core-js should polyfill stuff like URLSearchParams and URL class. Making that switch could be good.