帶有 IE11 polyfill 導入的 Starter create-react-app 仍然在 IE11 中中止

Question

使用：反應 16.8.6。 工作於：開發模式。

1) 做： npm create-react-app my-app

2) cd my-app

3）添加：導入“react-app-polyfill/ie11”； 作為 index.js 中新的第一行

4）做：npm start

5) 在 Windows 10 上的 IE11 中，它在控制台中中止這些：

SCRIPT1002：語法錯誤 1.chunk.js (10735,34)

SCRIPT1002：語法錯誤 main.chunk.js (154,1)

我嘗試過其他 polyfill：

導入“react-app-polyfill/ie9”；

和

導入'react-app-polyfill/stable';

和

導入'react-app-polyfill/ie9'； 導入'react-app-polyfill/stable';

和

導入'react-app-polyfill/ie11'； 導入'react-app-polyfill/stable';

語法錯誤的位置發生了變化，但它仍然發生。

在所有其他瀏覽器中都可以正常工作。

import "react-app-polyfill/ie11";
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";

ReactDOM.render(<App />, document.getElementById("root"));

中止發生在生成的代碼加載之前。 它在 IE11 中提供了舊的“死亡白屏”。

任何人都可以分享讓 16.8.6 入門應用程序在 IE11 中工作的魔力嗎？

Answer 1

支持IE11可以參考以下步驟：

首先，安裝包： npm install react-app-polyfill 。

其次，添加import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; import 'react-app-polyfill/ie11'; import 'react-app-polyfill/stable'; 在 src/index.js 的第一行。

第三，在 package.json 中添加ie 11像這樣：

最后，您可以重新啟動您的應用程序，它將在 IE11 中運行。 如果還是不行，請刪除該應用程序，然后按照上述步驟重新創建。

Answer 2

截至 2020 年底， react-scripts 4.0.0 似乎在react-app-polyfill和 IE 11 方面存在問題，詳見https://github.com/facebook/create-react-app/issues/9906 。

我的解決方法，在我的 index.js 頂部（上面鏈接中顯示了多個其他）

// https://github.com/facebook/create-react-app/tree/master/packages/react-app-polyfill
import 'react-app-polyfill/ie11'
// https://github.com/facebook/create-react-app/issues/9906
// this is currently borked -> import 'react-app-polyfill/stable'
// so use core-js.. which might be the "right" way now per
// https://reactjs.org/docs/javascript-environment-requirements.html
import 'core-js/stable'

Answer 3

https://github.com/facebook/create-react-app/blob/master/packages/react-app-polyfill/README.md

yarn add react-app-polyfill

// These must be the first lines in src/index.js
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// ...