springboot- react application not working in internet explorer 11 and 9

Question

My react app is not working on Internet explorer 11. It is working fine on edge and chrome. when I connect my application through Node.js, react build folder it is working fine IE 11 and 9. through node server port it is working.

now I'm using spring boot but it is not working in IE11 and 9. I have deployed my react app in IIS.

I have created my application through npx create-react-app.( As pointed out in the other answers for similar questions)

I have included this in both my index.js file but it does not work. and installed polyfills in my app https://www.npmjs.com/package/react-app-polyfill

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

This is the error that I am getting:

I have looked at the links and they also faced the same error he didn't approve any answer yet React app not working in Internet Explorer 11 This is my package.json file:

{
      "name": "insurance_automation",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "axios": "^0.18.0",
        "babel-polyfill": "^6.26.0",
        "bcryptjs": "^2.4.3",
        "body-parser": "^1.19.0",
        "config": "^3.1.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "jsonwebtoken": "^8.5.1",
        "multer": "^1.4.1",
        "mysql2": "^1.6.5",
        "node": "^11.15.0",
        "nodemailer": "^6.2.1",
        "react": "^16.8.6",
        "react-dom": "^16.8.6",
        "react-router-dom": "^5.0.0",
        "react-scripts": "3.0.1",
        "sequelize": "^5.8.6",
        "universal-cookie": "^4.0.0"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "dev": "concurrently \"npm run server\" \"npm start\" "
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "concurrently": "^4.1.0",
        "nodemon": "^1.19.1"
      }
    }

can anyone help me to resolve this issue.

Answer 1

As https://www.npmjs.com/package/react-app-polyfill suggests:

f you are supporting Internet Explorer 9 or Internet Explorer 11 you should include both the ie9 or ie11 and stable modules

import stable module of the react-app-polyfill in your main js file:

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

and ie11 should also be included to your browserslist:

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

Answer 2

What worked for me for both development and production

1.Import polyfills https://www.npmjs.com/package/react-app-polyfill#polyfilling-other-language-features

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

2.Include ie11/ie9 to your browserlist in package.json https://github.com/browserslist/browserslist

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

}

3.Delete .cache folder from your node_modules https://create-react-app.dev/docs/supported-browsers-features/#supported-browsers (This one did the trick for development environment)