web-dev-qa-db-ja.com

IE 11が空白ページレンダリング反応アプリを表示する理由

IE 11と私の反応するアプリに問題があります。私はWebpack、babel、polyfill.io cdnを使用しますが、すべてがバンドルされたファイルをレンダリングするまでNiceであり、その後は何もしなくなります。何がうまくいかないか考えていますか？

前もって感謝します。

javascriptreactjsinternet-explorerrenderingpolyfills
9
itgirl1234

ReactはIEとすぐに互換性がない場合があります。

公式ドキュメントから：

Reactは、Internet Explorer 9以降を含むすべての一般的なブラウザーをサポートしていますが、IE 9やIE 10などの古いブラウザーにはいくつかのポリフィルが必要です。

ES5メソッドをサポートしていない古いブラウザはサポートしていませんが、ページにes5-shimやes5-shamなどのポリフィルが含まれている場合、アプリが古いブラウザで動作することがあります。この道を取ることを選択した場合、あなたは独力です。

アプリケーションをIE（11または9）で動作させるには、React-app-polyfillをインストールする必要があります。

https://www.npmjs.com/package/react-app-polyfill

特徴 ：

各ポリフィルは、次の言語機能が存在することを保証します。

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

使用法

最初に、Yarnまたはnpmを使用してパッケージをインストールします。

npm install react-app-polyfill

これで、サポートする予定の最小バージョンのエントリポイントをインポートできます。たとえば、IE9エントリポイントをインポートする場合、IE10およびIE11のサポートが含まれます。

Internet Explorer 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

次のドキュメントを使用して、さまざまなブラウザを処理するようにマニフェストを構成することもできます。 https://github.com/browserslist/browserslist

例：

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]
14
Treycos

この問題につまずく他の人にとっては、

React-app-polyfillが機能しない場合は、代わりにcore-jsを試してください。

$ npm install core-js

これがsrc/index.jsファイルの最初の行であることを確認してください。

import 'core-js/stable'

また、開発中は修正が表示されない場合があります。

私にとっては、問題は製品版でのみ解決されました（React Build）

3
Kurisubo

react-app-polyfillsは本番でのみ動作し、devでは動作しません。ビルド、デプロイ、およびテストします。

1
Konstantin Zlatkov

リデューサー（たとえば）でObject.assign（）またはIE11がポリフィルなしではサポートしない他の関数を使用している場合、この問題が発生します。

1
Vjeko Babic

上記のソリューションを試してみましたが、IE11または古いiOS 9.3.2でページを動作させることができませんでした...

@Treycosおよび@Kurisuboで提案されているとおりに行いましたが、解決策はありません。解決するには、es6の矢印関数を私の機能コンポーネントから古い学校の宣言型スタイルに置き換え、ページをIE 11およびiOS 9.3.2にロードする必要がありました

NOTE：この機能コンポーネントは、ページにレンダリングされた最初のコンポーネントでした

ここにこれを追加して、誰かが将来利益を得られるようにします。

0
Akber Iqbal