react app 在 chrome 和其他瀏覽器中運行良好，但在 IE11 上返回空白頁面

Question

生產后，我的 react 應用程序在 chrome 和其他瀏覽器中運行良好。 但是當涉及到 IE 時，它只顯示一個帶有標題的空白頁面。 我的猜測是它只是加載 index.html 而不是任何 javascript 文件。 我該怎么辦？ 我已經嘗試過 polyfill 和 core-js。 沒運氣。

這是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"
    ]
  }
}

這是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();

這是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>

我查了一下，發現有很多人對 IE 有同樣的問題。 如何讓我的應用在 IE 上運行？

編輯：如您所見，我已經嘗試過為什么 IE 11 顯示空白頁面渲染反應應用程序它沒有解決任何問題。 我究竟做錯了什么？

Answer 1

嘗試在 index.html 的頭部添加以下元標記：

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

另外，從你的代碼來看，你似乎已經安裝了polyfill，請檢查package.json文件，確保在這個文件中添加了ie 11。 之后，重新啟動應用程序並檢查它是否可以在 IE11 中運行。

在 '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

在 ./node_modules/react-dev-utils/webpackHotDevClient.js 文件的第 66 行添加斜杠：true

來源： 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