react app 在 chrome 和其他浏览器中运行良好，但在 IE11 上返回空白页面

Question

My react app works fine in chrome and other browsers after production.生产后，我的 react 应用程序在 chrome 和其他浏览器中运行良好。 But when it comes to IE it only shows a blank page with the title.但是当涉及到 IE 时，它只显示一个带有标题的空白页面。 My guess is it simply loads the index.html and not any of the javascript files.我的猜测是它只是加载 index.html 而不是任何 javascript 文件。 What do I do?我该怎么办？ I already tried polyfill and core-js.我已经尝试过 polyfill 和 core-js。 No luck.没运气。

this is the package.json这是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这是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这是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.我查了一下，发现有很多人对 IE 有同样的问题。 How do I get my app to run o IE?如何让我的应用在 IE 上运行？

EDIT : as you can see I have already tried Why IE 11 display blank page rendering react app it's not solving anything.编辑：如您所见，我已经尝试过为什么 IE 11 显示空白页面渲染反应应用程序它没有解决任何问题。 what am I doing wrong?我究竟做错了什么？

Answer 1

Try to add the following meta tag in the head section of your index.html:尝试在 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.另外，从你的代码来看，你似乎已经安装了polyfill，请检查package.json文件，确保在这个文件中添加了ie 11。 After that, restart the app and check whether it will work in IE11.之后，重新启动应用程序并检查它是否可以在 IE11 中运行。

Add ie 11 in 'package.json' like this:在 'package.json' 中添加 ie 11，如下所示：

      "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

Add slashes: true, to line 66 of the./node_modules/react-dev-utils/webpackHotDevClient.js file在 ./node_modules/react-dev-utils/webpackHotDevClient.js 文件的第 66 行添加斜杠：true

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

react app 在 chrome 和其他浏览器中运行良好，但在 IE11 上返回空白页面

问题描述

2 个解决方案

解决方案1
0 2019-10-07 14:11:28

解决方案2
0 2020-01-17 00:14:11

react app 在 chrome 和其他浏览器中运行良好，但在 IE11 上返回空白页面

问题描述

2 个解决方案

解决方案1 0 2019-10-07 14:11:28

解决方案2 0 2020-01-17 00:14:11

解决方案1
0 2019-10-07 14:11:28

解决方案2
0 2020-01-17 00:14:11