-1

My react app works fine in chrome and other browsers after production. But when it comes to IE it only shows a blank page with the title. My guess is it simply loads the index.html and not any of the javascript files. What do I do? I already tried polyfill and core-js. No luck.

this is the package.json

 {
  "name": "wildfire",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/polyfill": "^7.6.0",
    "@types/react-highlight-words": "^0.16.0",
    "@version/react-router-v3": "^1.0.0",
    "antd": "^3.22.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "core-js": "^3.2.1",
    "react": "^16.8.6",
    "react-app-polyfill": "^1.0.4",
    "react-dom": "^16.8.6",
    "react-router": "^3.2.4",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "serve": "^11.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      "defaults"
    ],
    "development": [
      "defaults"
    ]
  }
}

this is the index.js

 import "@babel/polyfill"
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';
    import 'core-js/es/map';
    import 'core-js/es/set';
    import 'raf/polyfill'
    import 'core-js/features/number/is-nan';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import {BrowserRouter as Router} from 'react-router-dom'
    import App from './App';
    import 'bootstrap/dist/css/bootstrap.css';
    import 'antd/dist/antd.css'
    import './index.css';
    import * as serviceWorker from './serviceWorker';

    ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: 
    serviceWorker.unregister();

this is index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>IT Forms Portal</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

I looked up and saw that there are lots of people with the same issue regarding IE. How do I get my app to run o IE?

EDIT: as you can see I have already tried Why IE 11 display blank page rendering react app it's not solving anything. what am I doing wrong?

Arun K Anil
  • 95
  • 2
  • 12
  • Possible duplicate of [Why IE 11 display blank page rendering react app](https://stackoverflow.com/questions/53631949/why-ie-11-display-blank-page-rendering-react-app) – sayalok Oct 07 '19 at 11:46
  • These things happen some times if you use ES6 features without providing extra bundle for ES5 support – Magelan Oct 07 '19 at 11:54
  • I followed the answer mentioned in the link. that's how I installed and added polyfill. still not working – Arun K Anil Oct 07 '19 at 12:07

2 Answers2

0

Try to add the following meta tag in the head section of your index.html:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Besides, from your code, it seems that you have already installed the polyfill, please check the package.json file, make sure you have add ie 11 in this file. After that, restart the app and check whether it will work in IE11.

Add ie 11 in 'package.json' like this: 

      "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"
        ]
      }
Zhi Lv
  • 18,845
  • 1
  • 19
  • 30
  • tried it. added the meta tag. still nothing. just a blank page. – Arun K Anil Oct 09 '19 at 05:54
  • i'm using create-react-app . is that a problem? – Arun K Anil Oct 09 '19 at 06:49
  • 1
    Can you post the related code in the package-lock.json file, I have a similar sample, it works well on my side, I think perhaps the issue is related the detail package version, need to further check. – Zhi Lv Oct 10 '19 at 10:15
  • 1
    Besides, I suppose perhaps the issue also related to the polyfill, because, I also try to create a new react sample (using the latest version) by [using the create-react-app](https://create-react-app.dev/docs/getting-started) and add [the react-app-polyfill](https://www.npmjs.com/package/react-app-polyfill). It will still display blank page in IE browser. You could also feedback this issue to [reactjs forum](https://github.com/facebook/create-react-app/issues), like [this thread ](https://github.com/facebook/create-react-app/issues/7760). – Zhi Lv Oct 10 '19 at 10:24
  • the issue is partially resolved for now. the production build is ok and running in IE11 . I had to use `react-app-polyfill` . imported `ie11` on the first line and `stable` on the second line. still not working in the development build though – Arun K Anil Oct 11 '19 at 11:35
0

Add slashes: true, to line 66 of the ./node_modules/react-dev-utils/webpackHotDevClient.js file

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

Ruediger
  • 1