Razzle: IE 11：webpackHotDevClientで壊れています。

create-react-appはデフォルトで、別のパッケージを使用したオプトインがあり

ポリフィルに関するドキュメントがv3用に更新された

ただし、これで問題が解決するとは思いません。 同様のことがCRAで追跡されているようです： https ： Mapが未定義であることに関連しており、ポリフィルを使用して修正可能なものとして意味があります。

ただし、IE 9-11のサポートに関するこれらすべてのことは、ポリフィリングに関するものです。 ポリフィルで矢印機能を修正できるとは思いません。 コードは古いブラウザ用にトランスパイルされていないだけで、依存関係自体を更新せずに修正する方法がわかりません。

これは、 ansi-regex 、 strip-ansi 、その他の問題でもあります。 react-dev-utils内のファイル（ formatWebpackMessages.js ）、およびreact-dev-utils必要に応じてその他のchalkファイル。 私はreact-dev-utilsにあまり詳しくないので、これが彼らのバグなのか、それともこのようなものがバンドルに含まれるべきではないのか、それとも何なのかわかりません。

ここで解決しなければならないことが2つあります。

1. ポリフィルはデフォルトではなくなりました（CRA2についても同じです）。 ポリフィルは、Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etcに関連する問題を解決します。 これを処理するには、 react-app-polyfillから、特定のアプリに必要な特定のcore-jsポリフィルを要求するまで、さまざまな方法があります。 Babel自体が、適切な構成でコードに必要なcore-jsポリフィルを特定するのに役立つと思います（ここに問題がある可能性がありますか？CRA2がこのルートに進まなかった理由はわかりません）。

2. 一部のライブラリ作成者は、モジュールのes5バージョン（ ansi-regex 、 react-dev-utilsなど）を配布しなくなりました。 IE11が太い矢印で窒息しているのを見る場合、これはあなたが直面している問題です。 CRA2はnode_modules （ CRA2のwebpack conf ）をトランスパイルすることでこれを解決しますコンパイルする特定のnode_modulesを含めることができます。

IE 11で機能させるために変更する必要があるものがまだ得られません。本番バンドル全体でさえ、 constと矢印関数が含まれています。
縮小されたバンドルを見て、どのモジュールをトランスパイルする必要があるかを見つける必要がありますか？ それはひどいです、もっと親しみやすい方法はありますか？

これは私のために物事を機能させました：

https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment -483928457

ちょっと迷惑

あなたはあなたの問題を解決するために以下に従うことができます：
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

以下のbrowserlistでpackage.jsonを更新して、IEで機能させるようにします。

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "last 2 ie version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "last 2 ie version"
    ]
  },

このようにして、少なくともconst ＆ arrow関数なしでコードをコンパイルできますが、その後、webpackHotDevClientが壊れ始め、コンソールでも手がかりが得られなくなります。

私はこの問題に関して多くの解決策を試しました。
提供されているソリューションはいずれも、IE11またはEdgeでの開発に使用されていません。
IEバージョン：11.864.17763.0

以下は私のパッケージjsonファイルです。

{{
"名前"： "typescript_tutorial"、
「バージョン」：「0.1.0」、
「プライベート」：true、
「依存関係」：{
"@ tests-library / jest-dom"： "^ 4.2.4"、
"@ tests-library / react"： "^ 9.4.0"、
"@ tests-library / user-event"： "^ 7.2.1"、
"@ types / jest"： "^ 24.0.25"、
"@ types / node"： "^ 12.12.24"、
"@ types / react"： "^ 16.9.17"、
"@ types / react-dom"： "^ 16.9.4"、
"react"： "^ 16.12.0"、
"react-app-polyfill"： "^ 1.0.5"、
"react-dom"： "^ 16.12.0"、
"react-scripts"： "3.3.0"、
"typescript"： "^ 3.7.4"
}、
「スクリプト」：{
"start"： "react-scripts start"、
"ビルド"： "react-scriptsビルド"、
"test"： "react-scripts test"、
"eject"： "react-scriptseject"
}、
"eslintConfig"：{
"extends"： "react-app"
}、
"ブラウザリスト"：{
「生産」：[
"> 0.2％"、
"死んでいません"、
「op_miniがすべてではない」
]、
「開発」：[
"> 0.2％"、
"死んでいません"、
「op_miniallではない」、
「最後の1クロームバージョン」、
「最後の1つのFirefoxバージョン」、
「最後の1サファリバージョン」、
「最後の2すなわちバージョン」
]
}、
"devDependencies"：{
"eslint-config-airbnb"： "^ 18.0.1"、
"eslint-config-prettier"： "^ 6.9.0"、
"eslint-plugin-import"： "^ 2.18.2"、
"eslint-plugin-jsx-a11y"： "^ 6.2.3"、
"eslint-plugin-prettier"： "^ 3.1.2"、
"eslint-plugin-react"： "^ 7.14.3"、
"eslint-plugin-react-hooks"： "^ 1.7.0"、
"node-sass"： "^ 4.13.0"、
"よりきれい"： "^ 1.19.1"
}
}

この問題の私の解決策は次のとおりです（Windowsではパスに\区切り文字が必要ですが、Linuxでは/ -正規表現で考慮されます）：

razzle.config.js ：

'use strict';

// The list was taken from
// https://github.com/styleguidist/react-styleguidist/pull/1327#issuecomment-483928457
// the regex is changed to work both on Windows and Linux
const ieRule = {
    test: /\.jsx?$/,
    include: new RegExp(
        `node_modules[/|\\\\](?=(${[
            'acorn-jsx',
            'estree-walker',
            'regexpu-core',
            'unicode-match-property-ecmascript',
            'unicode-match-property-value-ecmascript',
            'react-dev-utils',
            'ansi\-styles',
            'ansi-regex',
            'chalk',
            'strip-ansi'
        ].join('|')}))`
    ),
    use: {
        loader: "babel-loader",
        options: {
            presets: [["@babel/preset-env", { targets: { ie: 11 } }]]
        }
    }
};

module.exports = {
    modify: (config, { target, dev }, webpack) => {
        // full config https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/config/createConfig.js

        config.module.rules.unshift(ieRule);

        return config;
    },
};

.babelrc ：

{
  "presets": [
    [
      "razzle/babel",
      {
        "targets": {
          "browsers": [
            "ie 11",
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions"
          ]
        }
      }
    ]
  ]
}

また、IE11には次のような追加のエラーがありました。

SecurityError
指定したエラーには、スタックトレースが含まれていません。
互換性のないSockJS！ メインサイトは「1.3.0」、iframeは「1.4.0」を使用しています。

これらは、ここで述べられているようにWindowsレジストリを編集することで解決されました
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

つまり、私は作成しました

HKEY_LOCAL_MACHINE (or HKEY_CURRENT_USER)
   SOFTWARE
      Microsoft
         Internet Explorer
            Main
               FeatureControl
                  FEATURE_WEBSOCKET_MAXCONNECTIONSPERSERVER
                     iexplore.exe = (DWORD) 0x0000014 (20)

1ページあたりのWebSocketの許容量を増やすため。 その後、問題が発生する頻度は低くなりました（あまり不便を感じることなくデバッグできることはめったにありませんが、再度発生した場合は、別のタブを開いて現在のタブを閉じる必要があります）。

これを数日間見た後、ようやく回避策があります

WebpackDevServerのクライアントをreact-dev-utils / webpackHotDevClientからwebpack / hot / dev-serverの代替に変更する必要がありました

webpack.config.jsファイルに移動して、次の行を入れ替える必要があります。

isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),

これで：

isEnvDevelopment && require.resolve('webpack/hot/dev-server'),

@ a1g0rithmこれは私のための仕事です。

@ a1g0rithmどこで

@ a1g0rithmによって提供されたソリューションです。 webpack.dev.configファイルには次のメッセージが含まれています。

entry: [
    // ...
    // Note: instead of the default WebpackDevServer client, we use a custom one
    // to bring better experience for Create React App users. You can replace
    // the line below with these two lines if you prefer the stock client:
    // require.resolve('webpack-dev-server/client') + '?/',
    // require.resolve('webpack/hot/dev-server'),
    require.resolve('react-dev-utils/webpackHotDevClient'),

最初の2つのrequire.resolveのコメントを解除し、最後の1つにコメントを付けるだけです。

require.resolve('webpack-dev-server/client') + '?/',
require.resolve('webpack/hot/dev-server'),
// require.resolve('react-dev-utils/webpackHotDevClient'),

これは、開発中のクライアントにwebpackをインポートした悪いインポートだったと思います。 v4で修正済み