“react-app-polyfill”在 IE11 中不起作用答案

【问题标题】："react-app-polyfill" doesn't work in IE11“react-app-polyfill”在 IE11 中不起作用
【发布时间】：2020-05-07 03:15:27
【问题描述】：

我的 React 应用无法在 IE 11 上运行。
我的客户希望该应用程序至少可以在 ie11 上运行。
所以，我必须解决这个错误。

我尝试了“react-app-polyfill”的官方文档。但是还是不行。
请帮我。

src/index.jsx

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

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

package.json

  "dependencies": {
    ...
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
    "axios": "^0.19.0",
    "install": "^0.13.0",
    "node-sass": "^4.13.0",
    "npm": "^6.13.4",
    "react": "^16.12.0",
    "react-app-polyfill": "^1.0.5",
    "react-dom": "^16.12.0",
    "react-hotkeys": "^2.0.0",
    "react-redux": "^7.1.3",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "typescript": "^3.7.4"
  },
...
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "ie 11",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }

【问题讨论】：

标签： reactjs internet-explorer-11 polyfills

【解决方案1】：

也许问题与react-scripts version 有关，您使用的是 react-scripts 3.3.0 及更高版本。你可以检查 package.json 文件来验证它。

GitHub上有一些线程报告了这个错误，你可以参考他们，例如：github.com/facebook/create-react-app/issues/8197，github.com/facebook/create-react-app/issues/8195。

作为一种解决方法，您可以尝试降级 react-scripts 版本。据我所知，它仍然可以与react-scripts@3.2.0 一起使用。

【讨论】：

github.com/facebook/create-react-app/issues/… 在这里他使用了 3.4.3，这对我也有用

【解决方案2】：

在 index.js 中添加 react-app-polyfill 后，它将适用于 PROD 环境，但您需要在 package.json 中更新您的 browserslist 以用于 DEV 环境

index.js

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

import React from 'react';
import ReactDOM from 'react-dom';
.
.

package.json

.
.
"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "not dead" // new line
  ]
},
.
.

【讨论】：