nx: React application not running in IE11

@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.

Hi, i get some problems with transpilling to es5 in ie11.

Steps for reproduce:

1. Run npx create-nx-workspace@latest, create app from react preset;
2. Change target in tsconfig.base.json: target: "es5";

{
  "compileOnSave": false,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {}
  },
  "exclude": ["node_modules", "tmp"]
}

1. Add support IE11 in .browserslist

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major version
last 2 iOS major versions
Firefox ESR
IE 11

1. Install react-app-polyfill and add them in polyfills.ts

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

1. Change App functional component to class component.

import { Component } from 'react';
import styles from './app.module.scss';

export class App extends Component {
  render(): JSX.Element {
    return <div className={styles.app}>{"react-ie11"}</div>;
  }
}

export default App;

1. Run serve command in production configuration npx nx serve ie11-app --configuration=production;
2. Open IE11, get this error.

}},UXeq:function(e,t,n){"use strict";n.r(t);var r=n("r0ML"),o=n("+Q0i"),a=n("mAQP"),i=n.n(a),s=n("wO/c"),l=class extends r.Component{render(){return Object(s.jsxDEV)("div",{className:i.a.app,children:"react-ie11"},void 0,!1,

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic"
      }
    ]
  ],
  "plugins": []
}

class extends not transpiled to function. How to fix this?

nx report

>  NX  Report complete - copy this into the issue template

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

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.

Taking a look at this for the next release.

@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

Hi @kirjai

I have opened a PR purely for diff purposes against your repo: https://github.com/kirjai/nx-react-ie11/pull/1

The only changes I’ve made are those necessary to get this running on IE11 in a Parallels Windows 10 VM on my Mac.

On yarn serve IE11 gives a white screen with a syntax error, caused by an arrow function which survived transpilation:

Below are my nx report, yarn.lock, IE11 version. Note my own project is on the latest Nx versions as it was bootstrapped last week, and has the same issues.

  Node : 14.17.4
  OS   : darwin x64
  yarn : 1.21.1
  
  nx : Not Found
  @nrwl/angular : Not Found
  @nrwl/cli : 11.5.2
  @nrwl/cypress : 11.5.2
  @nrwl/devkit : 11.5.2
  @nrwl/eslint-plugin-nx : 11.5.2
  @nrwl/express : Not Found
  @nrwl/jest : 11.5.2
  @nrwl/linter : 11.5.2
  @nrwl/nest : Not Found
  @nrwl/next : Not Found
  @nrwl/node : Not Found
  @nrwl/react : 11.5.2
  @nrwl/schematics : Not Found
  @nrwl/tao : 11.5.2
  @nrwl/web : 11.5.2
  @nrwl/workspace : 11.5.2
  @nrwl/storybook : 11.5.2
  @nrwl/gatsby : Not Found
  typescript : 4.0.7

yarn.lock.txt

I just had an attempt at narrowing down the issue, and as far as I can tell, IE 11 support works fine with the simplest use case. Here’s a repo, where I can successfully run yarn nx serve --prod, open it in IE 11 (running in a VM, mind you), and see the UI working as expected. This is using latest version of Nx (11.5.2), and a fresh workspace. All it takes is adding IE 11 to .browserslist for the simplest use case.

Can someone who’s still experiencing this issue on latest Nx help narrow down what breaks IE 11 support for you specifically? A repro repo would be helpful. Repros that have been posted in this thread earlier are a few major versions behind by now, unfortunately. Without it, i’m afraid there’s nothing actionable for us here at the moment

Has anyone made it working with latest dev. This really deal breaker when we are trying to move towards monorepo and nx dev. It would be great if someone can share the solution if they have made it working.

For me it is not working at all. Even after trying most of the above solutions. Prod version just go blank on me in IE. While things are good for Chrome and other latest browser.

I want to share that this issue haunted me for at least two weeks. @countravioli, gave me the biggest hint by sharing information about the package: are-you-es5

I was not able to use his code snippets in their entirety, but using this package I was able to zero in on the offender and exclude it from my code base. FYI, my inherited project is tiny - so I was lucky to only have to remove one offender. Thank you very much!

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

@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.

the autoprefixer is not working either

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

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

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 ?

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…

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.