web-dev-qa-db-ja.com

EdgeブラウザでCreate-React-Appが機能しない

私は現在、Create-React-App Boilerplateから始めて、Reactをいじっています。これをダウンロードしたのは https://reactjs.org/docs/create-a-new-react-app.html です。

Chromeの場合、コードは非常にうまく機能しますが、Microsoft Edgeでは、brwoserウィンドウは何も出力されずに空白のままです。

Create-React-Packageはまったく変更していませんが、チュートリアルに従って作成したアプリにも当てはまります。Chromeでの動作は優れていますが、Edgeは単にコードが実行されなかったかのように白い画面を表示するだけです。

ReactアプリをEdge Browserで実行するには、追加のパッケージが必要ですか？

javascriptreactjsmicrosoft-edge
2
WiWi

Edge 48にも同様の問題があります。react-app-polyfillを使用することでいくつかの問題が解決しました-私の場合はArray.prototype.flatMapのサポートでした。

ただし、ポリフィルは一部の言語の問題を修正しません。私はコード全体にスプレッド構文を使用しており、手動で置き換えなければなりませんでした。

このようなコードに何かがある場合：

const { x, y, ...rest} = props;
const newProps = {...rest, a:1 };

次に、spread構文を次のようなものに置き換える必要があります。

const { x, y } = props;
const rest = {};
Object.keys(props).forEach(key => {
  if(key!=='x' && key !=='y') rest[key] = props[key];
});
const newProps = Object.assign({}, rest, {a:1});

ES5にトランスパイルする方法はあるかもしれませんが、create-react-appのデフォルト設定を真剣にいじらずにこれを行う方法はわかりません。

0
Trevedhek

私はIEとEdgeの互換性を扱いました。私の場合、いくつかのページでコーディングします

windows.scrollTo(0,0);

Chromeでは、FireFoxとSafariは正常に動作しますが、EdgeとIEで競合します。
具体的にはscrollTo（0,0）構文。だから私は構文をに変更しようとしました

windows.scrollTop = 0;

この簡単な変更で問題が解決し、IE=インスペクターコンソールでソリューションのデバッグを確認できます。これは、Edgeコンソールに情報が表示されないためです。頑張ってください。

0
maxrojas

開発者ツールを見ると、発生しているエラーが表示されます。それらを指定すると、問題を追跡しやすくなります。

古いブラウザの場合、追加する必要があるのはポリフィルです。

npm install react-app-polyfill

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

0
ca8msm