Razzle: IE 11: defekt mit webpackHotDevClient.

Ich glaube, ich sehe jetzt, dass die Create-React-App standardmäßig Opt-In mit einem separaten Paket . Vielleicht ist das nur eine Dokumentationssache? Wenn ja, werde ich versuchen zu aktualisieren.

Ich sehe jetzt, dass die Dokumente zu Polyfills für Version

Ich glaube jedoch nicht, dass dies das Problem löst. Es scheint, dass etwas Ähnliches in CRA verfolgt wird: https://github.com/facebook/create-react-app/issues/5336. Dieser hängt damit zusammen, dass Map undefiniert ist, was als etwas Fixierbares mit einer Polyfüllung sinnvoll wäre.

Bei all diesen Dingen zur Unterstützung von IE 9-11 geht es jedoch um Polyfilling. Ich glaube nicht, dass eine Polyfüllung eine Pfeilfunktion reparieren kann. Der Code ist für ältere Browser einfach nicht transpiliert, und ich sehe nicht, wie dies behoben werden kann, ohne die Abhängigkeit selbst zu aktualisieren.

Dies ist auch ein Problem mit ansi-regex , strip-ansi , einigen anderen. Dateien in react-dev-utils (einschließlich formatWebpackMessages.js ) und verschiedene chalk Dateien, wie von react-dev-utils gefordert. Ich bin nicht sehr vertraut mit React-Dev-Utils, daher bin ich mir nicht sicher, ob dies ein Fehler bei ihnen ist oder ob dieses Zeug einfach nicht im Bundle enthalten sein soll oder was.

Hier müssen Sie zwei Dinge lösen:

1. Polyfills sind standardmäßig nicht mehr vorhanden (dasselbe gilt für CRA2). Polyfills lösen Probleme im Zusammenhang mit Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc. Es gibt ein Dutzend Möglichkeiten, um damit umzugehen, von react-app-polyfill bis hin zum Erfordernis der spezifischen Core-Js-Polyfills, die Ihre spezifische App benötigt. Ich denke, Babel selbst kann helfen, herauszufinden, welche Core-Js Ihren Code mit der entsprechenden Konfiguration füllen (hier könnte es einen Haken geben? Ich bin mir nicht sicher, warum CRA2 diesen Weg nicht gegangen ist).

2. Einige Bibliotheksautoren vertreiben keine es5-Versionen ihrer Module mehr ( ansi-regex , react-dev-utils usw. usw.). Wenn Sie sehen, dass IE11 an fetten Pfeilen erstickt, ist dies das Problem, mit dem Sie konfrontiert sind. CRA2 löst dieses Problem, indem node_modules ( Webpack conf in CRA2 ) dass sie die spezifischen Knotenmodule enthält, die Sie kompilieren möchten .

Ich bekomme immer noch nicht das, was geändert werden muss, damit es für IE 11 funktioniert. Sogar mein gesamtes Produktionspaket enthält jetzt const s und Pfeilfunktionen.
Muss ich anhand des minimierten Bundles herausfinden, welche Module transpiliert werden müssen? Das wäre scheiße, gibt es einen zugänglicheren Weg?

Das hat die Dinge für mich zum Laufen gebracht:

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

irgendwie nervig

Sie können unten folgen, um Ihr Problem zu beheben:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Aktualisieren Sie package.json mit der folgenden Browserliste, damit es für den IE funktioniert:

"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"
    ]
  },

Auf diese Weise erhalten Sie zumindest Ihren Code ohne die Funktion const & arrow , aber der Haken ist, dass ich mit webpackHotDevClient nicht mehr weiterkomme und auch in der Konsole keine Ahnung bekomme.

Ich habe viele Lösungen für dieses Problem ausprobiert.
Keine der bereitgestellten Lösungen arbeitet in der Entwicklung in IE11 oder Edge.
IE-Version: 11.864.17763.0

Unten ist meine Paket-JSON-Datei.

{
"name": "typescript_tutorial",
"version": "0.1.0",
"privat": wahr,
"Abhängigkeiten": {
"@ testing-library / jest-dom": "^ 4.2.4",
"@ testing-library / react": "^ 9.4.0",
"@ testing-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",
"reagieren": "^ 16.12.0",
"React-App-Polyfill": "^ 1.0.5",
"React-Dom": "^ 16.12.0",
"React-Scripts": "3.3.0",
"Typoskript": "^ 3.7.4"
},
"Skripte": {
"start": "reag-scripts start",
"build": "React-Scripts Build",
"test": "React-Scripts-Test",
"Auswerfen": "React-Skripte auswerfen"
},
"eslintConfig": {
"erweitert": "React-App"
},
"Browserliste": {
"Produktion": [
"> 0,2%",
"nicht tot",
"nicht op_mini all"
],
"Entwicklung": [
"> 0,2%",
"nicht tot",
"nicht op_mini all",
"letzte 1 Chromversion",
"letzte 1 Firefox-Version",
"letzte 1 Safari-Version",
"letzte 2 dh Version"
]]
},
"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",
"hübscher": "^ 1.19.1"
}}
}}

Meine Lösung für dieses Problem war die folgende (beachten Sie, dass Sie unter Windows \ Trennzeichen in Pfaden benötigen, während unter Linux / - dies wird im regulären Ausdruck berücksichtigt):

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"
          ]
        }
      }
    ]
  ]
}

Es gab auch einige zusätzliche Fehler in IE 11 wie:

Sicherheitsfehler
Der von Ihnen angegebene Fehler enthält keine Stapelverfolgung.
Inkompatible SockenJS! Die Hauptseite verwendet: "1.3.0", den Iframe: "1.4.0".

Diese wurden gelöst, indem die Windows-Registrierung wie hier beschrieben bearbeitet wurde
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

Nämlich ich habe geschaffen

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

um die zulässige Anzahl von Websockets pro Seite zu erhöhen. Danach trat das Problem seltener auf (selten genug, um ohne große Unannehmlichkeiten zu debuggen, aber wenn es erneut auftritt, müssen Sie einen anderen Tab öffnen und den aktuellen schließen).

Nachdem ich mir das ein paar Tage angesehen habe, habe ich endlich eine Problemumgehung

Ich musste den Client für WebpackDevServer von react-dev-utils / webpackHotDevClient auf die Alternative webpack / hot / dev-server ändern

Sie müssen zu Ihrer Datei webpack.config.js gehen und diese Zeile austauschen:

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

mit diesem:

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

@ a1g0rithm das ist Arbeit für mich.

@ a1g0rithm wo hast du webpack.config.js gefunden?

Die von @ a1g0rithm bereitgestellte Lösung ist die einzige, die nach dem Upgrade einer älteren, ausgeworfenen CRA-App von Webpack v2 auf v4 für mich funktioniert hat. Die Datei webpack.dev.config enthält die folgende Meldung:

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'),

Kommentieren Sie einfach die ersten beiden require.resolve und kommentieren Sie die letzte:

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

Ich denke, dies war ein schlechter Import, der das Webpack des Clients in der Entwicklung importierte. In v4 behoben