獲取使用在 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';