获取使用在 IE11 中工作的 create-react-app 创建的应用程序

Question

我使用create-react-app version 3.3.0创建了我的 React 应用程序。 我的应用程序在除 IE11 之外的所有浏览器中都能正常工作。

控制台中的错误是

HTML1300: Navigation occurred.
localhost:3000

SCRIPT1002: Syntax error
1.chunk.js (107,34)

SCRIPT1002: Syntax error
main.chunk.js (183,26)

我看过很多关于这个的帖子，我相信我已经按照博客/stackover 流程帖子所说的所有步骤进行操作，但似乎没有任何东西可以修复我的应用程序。

我的 package.json 包含，在浏览器列表中看到它包含 IE11

 "dependencies": {
    "prop-types": "^15.7.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-router-dom": "~5.1.2",
    "react-scripts": "~3.2.0"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.1.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^2.5.1"
  },
  "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"
    ]
  }

我的“index.jsx”包含

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import ComponentA from './components/ComponentA';
import ComponentB from './components/ComponentB';

render(
  (
    <Router >
      <Layout>
        <Switch>
          <Route exact path="/" component={ComponentA} />
          <Route exact path="/b" component={ComponentB} />
        </Switch>
      </Layout>
    </Router>
  ),
  document.getElementById('root'),
);

我通过执行以下操作来运行我的应用程序

• 删除“节点模块”文件夹
• 运行“npm 安装”
• 运行“npm 开始”

修复尝试 1：react-app-polyfill

package.json

npm install react-app-polyfill

它作为依赖项添加到“package.json”

 "dependencies": {
    .....
    "react-app-polyfill": "^1.0.6",
    ....
  },
    

索引.jsx

在 index.jsx 中，我添加了以下导入作为 FIRST 导入

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

结果

IE 仍然在控制台中显示空白页和相同的错误

修复尝试 2：@babel/polyfill

package.json

npm install @babel/polyfill

它作为依赖项添加到“package.json”

 "dependencies": {
    .....
    "@babel/polyfill": "^7.10.1",
    ....
  },
    

索引.jsx

在 index.jsx 中，我添加了以下导入作为 FIRST 导入

import '@babel/polyfill';

结果

IE 仍然在控制台中显示空白页和相同的错误

修复尝试 3：core-js

package.json

npm install core-js

它作为依赖项添加到“package.json”

 "dependencies": {
    .....
    "core-js": "^3.6.4",
    ....
  },
    

索引.jsx

在 index.jsx 中，我添加了以下导入作为 FIRST 导入

import 'core-js';

我也试过

import 'core-js/stable';

结果

IE 仍然在控制台中显示空白页和相同的错误

笔记

当我尝试每个选项时，我做了以下

• 安装了相关的 package 确保其添加到 package.json
• 相应地编辑了“index.jsx”
• 删除“节点模块”文件夹
• 运行“npm 安装”
• 运行“npm 开始”

我做错了什么，其他帖子/博客中提到的所有修复都对我不起作用。

Answer 1

奇怪的是我现在有这个工作，我不确定我改变了什么让它工作。 然而，这是我目前拥有的。

package.json

"dependencies": {
    "prop-types": "^15.7.2",
    "react": "^16.11.0",
    "react-app-polyfill": "^1.0.6",
    "react-dom": "^16.11.0",
    "react-masonry-component": "^6.2.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.2.0"
  },

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

索引.jsx

// these 2 MUST be the first 2 imports
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';