React App - Bable Polyfill not working correctly IE11

Question

I am working on a react app that has a reported issue that I am scratchning my head on and seems that a number of people have also had this issue.

The error in the console is

All attempts to resolve have been unsuccessful including these links below:

React polyfills for ie >= 9

React app not rendering in IE 11 even with polyfills

https://github.com/facebook/create-react-app/issues/8197

My index.tsx file looks this

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'fast-text-encoding/text';
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { hot } from 'react-hot-loader/root'
import App from './App'

I have included this in my package.json file

"browserslist": {
 "production": [
   ">0.2%",
   "not dead",
   "not op_mini all"
 ],
 "development": [
   "ie 11",
   "last 1 chrome version",
   "last 1 firefox version",
   "last 1 safari version"
 ]
}

The error in the console of IE11 points to bundle.js as the problem and more specifically these arrow functions.

 const is = {
  arr: Array.isArray,
  obj: a => Object.prototype.toString.call(a) === '[object Object]', // This is where the error is reported. 
  fun: a => typeof a === 'function',
  str: a => typeof a === 'string',
  num: a => typeof a === 'number',
  und: a => a === void 0,
  nul: a => a === null,
  set: a => a instanceof Set,
  map: a => a instanceof Map,

  equ(a, b) {
    if (typeof a !== typeof b) return false;
    if (is.str(a) || is.num(a)) return a === b;
    if (is.obj(a) && is.obj(b) && Object.keys(a).length + Object.keys(b).length === 0) return true;
    let i;

  for (i in a) if (!(i in b)) return false;

  for (i in b) if (a[i] !== b[i]) return false;

  return is.und(i) ? a === b : true;
 }

};

My ts config file looks like this:

  {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "outDir": "./dist/",
    "sourceMap": true,
    "strict": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "module": "es6",          <=== //// Could this and target be something to do with the issue?
    "moduleResolution": "node",
    "target": "es5",          <=== //// Could this and module be something to do with the issue?
    "allowJs": true,          
    "checkJs": true,
    "jsx": "react",
    "baseUrl": ".",
    "types": ["react", "node", "jest"],
    "paths": {
      "assets/*": ["src/assets/*"],
      "config/*": ["src/config/*"],
      "containers/*": ["src/containers/*"],
      "hooks/*": ["src/hooks/*"],
      "providers/*": ["src/providers/*"],
      "routes/*": ["src/routes/*"],
      "store/*": ["src/store/*"],
      "tests/*": ["src/tests/*"],
      "theme/*": ["src/assets/theme/*"],
      "constants/*": ["src/utils/constants/*"],
      "translations/*": ["src/translations/*"],
      "utils/*": ["src/utils/*"],
      "views/*": ["src/views/*"]
    }
  },
  "include": ["./src/**/*", "tsconfig.json", "./typings/**/*.ts"]
}

I would be grateful for any and all assistance on this in terms of what the fix is \ could be, what I need to look into that I may have missed etc.

Answer 1

I was partially able to load my app in IE11. One of my problems was the arrow function as yours. My difference from yours is in browserslist i put "ie 11" in as the last one.

In react docs :

When editing the browserslist config, you may notice that your changes don't get picked up right away. This is due to an issue in babel-loader not detecting the change in your package.json. A quick solution is to delete the node_modules/.cache folder and try again.

So I deleted the./cache folder, ran a new build and then started the application again and I could see it in IE11

However I still have code errors related to @font-face and closest . I have to look for it

Answer 2

I had a similar issue with arrow functions and promises on IE 11 after upgraded babel from version 6 to 7. @babel/polyfill didn't work for IE 11. Had to switch to core-js version 3.

My babel.config.js file needed change and following was updated

const presets = [
    [
      '@babel/preset-env',
      {
        useBuiltIns: 'usage',
        corejs: { version: 3, proposals: true }
      }
    ],

And install

 "core-js": "^3.6.5",
"regenerator-runtime": "^0.13.5",

And Finally replace @babel/polyfill imports with

import 'core-js/stable';
import 'regenerator-runtime/runtime';

Answer 3

This might not be super obvious when you already have not ie <= 10 ... make sure you also add ie 11 or it does not seem to convert arrow functions and fails to load in IE11.

 "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 10",
    "ie 11", // <===========================
    "not op_mini all"
  ]

Note that I think the default behaviour changed somewhere between react-scripts version 3.2.0 and 3.4.0. I rolled back to 3.2.0 and didn't need to add ie 11 to browserslist, then rolled forward to 3.4.0 and needed ie 11 explicitly in browserslist.