Create-react-app: `react-scripts`v4.0.0を使用するアプリはIE11では機能しません

私が間違っていなければ、 browserslist構成のため、開発モードでは新しいプロジェクトはIEでまったく機能しません。

（ package.json ）。

@ Pierre-Do
はい、不足している情報で問題を更新しました。
IE11がそのままではサポートされていないことを忘れましたが、 react-app-polyfillではうまく機能しません:(

+、本番ビルドで同じ問題
https://reactjs.org/docs/error-decoder.html/?invariant=31&args [] = object％20with％20keys％20％7B％24％24typeof％2C％20type％2C％20key％2C％20ref％2C ％20props％2C％20_owner％7D

私の回避策：

import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
import 'core-js/stable';
import 'regenerator-runtime/runtime';

私もこの問題の影響を受けています

@ezBillソリューションが機能することを確認できます。
たぶんreact-app-polyfillを修正する必要がありますか？

@ezBillソリューションが機能することを確認できます。

+1

回避策が機能していません。エラーが残ります。

私のポリフィルは次のようになり、IE11では問題ありません。

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

これらは、これらのポリフィルが配置されていないと壊れてしまう他のインポートよりも上にある必要があることに注意してください。 さらに、ポリフィルはTextEncoderようないくつかの難解なAPIを提供しないため、何らかの理由で必要な場合は、それらのポリフィルをロードする必要があります。

新しいjsxトランスフォームがこれを引き起こしていると思います。ポリフィルもインポートするメインのindex.jsの先頭に/** <strong i="5">@jsxRuntime</strong> classic */を追加するか、 DISABLE_NEW_JSX_TRANSFORM=true環境変数を設定して無効にしてみてください。 私の場合、これらのいずれかがこれを修正します。

私の推測では、最初にポリフィルをインポートすることで、反応する前にそれらをロードすることができますが、コンパイラーが挿入するimport {jsx as _jsx} from 'react/jsx-runtime';行の前にロードすることはできません。

@msbarryこれで問題が解決することを確認できます。 お手伝いありがとう！

これと同じ問題が発生しました。 ただし、コードベースの多くはすでに新しいJSX形式（ Reactをインポートする必要がない形式）に変換されています。

朗報です！ 新しいJSX構文をすべて維持することができました。

これをsrc/index.jsファイルの先頭に適用するだけで済みました。

/** <strong i="10">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11'

// IE11 needs "jsxRuntime classic" for this initial file which means that "React" needs to be in scope
// https://github.com/facebook/create-react-app/issues/9906
import React from 'react'

コメントを追加しました。そうしないと、これが人々が理解できないものであり、おそらくコードベースに永遠にぶら下がってしまう可能性があるためです。

唯一の欠点は、ツリーシェイクでバンドルサイズを縮小できないことです。これは、最初にReact17にアップグレードした主な理由の1つでした:(

FWIW index.tsファイルをinit.ts main.tsxファイルとinit.tsは関連するすべてのポリフィルをインポートし、 main.tsxは実際のエントリポイントです（ Reactコードを含む）とindex.tsは、両方を順番にインポートするだけです。 これにより、ポリフィルを有効にする必要のあるモジュールがポリフィルの後にロードされ、インポートの自動並べ替えを使用する場合でも、ポリフィルがメインエントリポイントの前に来るように名前が付けられます。

これは、この問題を回避するよりも実行可能な解決策になる可能性があります。

上記のどれも機能していないようです。

IE11エラーと

エラーをクリックすると、ここに表示されます

IEバージョン

これは再現するための非常に簡単な例です

1. npx create-react-app ie11app
2. yarn add react-app-polyfill
3. index.js更新します

/** <strong i="23">@jsxRuntime</strong> classic */
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <div>Come on</div>,
  document.getElementById('root')
);

1. 追加ie 11にbrowerslistでpackage.json

{
  "name": "ie11app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "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"
    ]
  }
}

1. yarn start

index.jsからimport 'react-app-polyfill/stable';を削除してみてください。

必要なのはimport 'react-app-polyfill/ie11'だけです

それはポリフィルの問題のようには見えません。 デバッガーに表示されているコードはES5ではなく、破壊とデフォルトの引数を使用していますが、どちらもIE11ではサポートされていません。 "ie 11"代わりにbrowserslist "ie >= 11"を使用してみてください。 それは私が持っているものであり、どちらの構文も機能するかどうかはわかりません。

@ Dan503 @pluma "ie >= 11"とimport 'react-app-polyfill/stable';両方を試しましたが、それでもうまくいきませんでした。

親切にして、新しいnpx create-react-app ie11appを作成し、IE11で実際に機能しているかどうかを確認してください。

ありがとうございました

更新：
"react-scripts": "^3.0.0"戻すと、 "react": "^17.0.1",でもIE 11で機能します
しかし、 "react-scripts": "4.0.0"はまだ私にとって壊れています

また、これらのソリューションの多くを試しました。 動作したのはreact-scriptsを3.4.4にダウングレードすることだけ