react app works fine in chrome and other browsers but returns blank page on IE11
Question
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?
2 answers
solution1
0 2019-10-07 14:11:28
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"
]
}
solution2
0 2020-01-17 00:14:11
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.