Razzle: IE 11: cassé avec webpackHotDevClient.

Je pense que je vois maintenant que create-react-app ne prend plus en charge IE 11 ou moins par défaut, mais il y a un opt-in avec un package séparé . Peut-être que ce n'est qu'une question de documentation? Si c'est le cas, je vais essayer de mettre à jour.

Je vois maintenant que la documentation sur les polyfills a été mise à jour pour la v3.

Cependant, je ne pense pas que cela résout le problème. Il semble que quelque chose de similaire soit suivi dans l'ARC: https://github.com/facebook/create-react-app/issues/5336. Celui-ci est lié au fait que Map n'est pas défini, ce qui aurait du sens comme quelque chose de réparable avec un polyfill.

Cependant, toutes ces choses concernant la prise en charge d'IE 9-11 concernent le polyfilling. Je ne pense pas qu'un polyfill puisse corriger une fonction de flèche. Le code n'est tout simplement pas transpilé pour les navigateurs plus anciens et je ne vois pas comment cela peut être corrigé sans mettre à jour la dépendance elle-même.

C'est aussi un problème avec ansi-regex , strip-ansi , quelques divers. fichiers dans react-dev-utils (y compris formatWebpackMessages.js ), et divers chalk fichiers comme requis par react-dev-utils . Je ne suis pas très familier avec react-dev-utils, donc je ne suis pas sûr s'il s'agit d'un bogue avec eux ou si ce truc n'est tout simplement pas censé être dans le bundle ou quoi.

Il y a deux choses que vous devez résoudre ici:

1. Les polyfills ne sont plus disponibles par défaut (il en va de même pour CRA2). Polyfills résoudra les problèmes liés à Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc. Il existe une douzaine de façons de gérer cela, allant de react-app-polyfill à l'exigence des polyfills core-js spécifiques dont votre application spécifique a besoin; Je pense que Babel lui-même peut vous aider à déterminer les polyfills core-js dont votre code a besoin avec la configuration appropriée (il pourrait y avoir un piège ici? Je ne sais pas pourquoi CRA2 n'a pas suivi cette voie).

2. Certains auteurs de bibliothèques ne distribuent plus les versions es5 de leurs modules ( ansi-regex , react-dev-utils , etc., etc.). Si vous voyez IE11 s'étouffer avec de grosses flèches, c'est le problème auquel vous êtes confronté. CRA2 résout cela en transpilant node_modules ( webpack conf dans CRA2 ) alors que Razzle ne le fait pas. Avec Razzle, vous pouvez utiliser des versions plus anciennes de ces modules _ou_ utiliser les hooks de Razzle pour modifier la configuration du webpack afin d' inclure les node_modules spécifiques que vous souhaitez compiler .

Je n'obtiens toujours pas ce qu'il faut changer pour le faire fonctionner pour IE 11. Même mon bundle de production entier contient maintenant const s et des fonctions fléchées.
Dois-je savoir quels modules doivent être transpilés en regardant le bundle minifié? Ce serait nul, y a-t-il un moyen plus accessible?

Cela a fait fonctionner les choses pour moi:

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

un peu ennuyeux

Vous pouvez suivre ci-dessous pour résoudre votre problème:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Mettez à jour package.json avec la liste de navigateurs ci-dessous pour le faire fonctionner pour 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"
    ]
  },

De cette façon, vous obtiendrez au moins qu'il soit conforme à votre code sans la fonction const & arrow , mais catch est après cela, je suis coincé avec webpackHotDevClient commence à casser et à ne pas avoir d'indice dans la console aussi.

J'ai essayé de nombreuses solutions autour de ce problème.
aucune des solutions fournies ne fonctionne en développement dans IE11 ou Edge.
Version IE: 11.864.17763.0

Voici mon fichier json de package.

{
"name": "typescript_tutorial",
"version": "0.1.0",
"privé": vrai,
"dépendances": {
"@ 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",
"réagir": "^ 16.12.0",
"react-app-polyfill": "^ 1.0.5",
"react-dom": "^ 16.12.0",
"react-scripts": "3.3.0",
"dactylographié": "^ 3.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "test des scripts de réaction",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extend": "react-app"
},
"liste des navigateurs": {
"production": [
"> 0,2%",
"pas mort",
"pas op_mini tout"
],
"développement": [
"> 0,2%",
"pas mort",
"pas op_mini tout",
"1 dernière version Chrome",
"1 dernière version de Firefox",
"1 dernière version safari",
"2 dernières versions ie"
]
},
"devDependencies": {
"eslint-config-airbnb": "^ 18.0.1",
"eslint-config-joli": "^ 6.9.0",
"eslint-plugin-import": "^ 2.18.2",
"eslint-plugin-jsx-a11y": "^ 6.2.3",
"eslint-plugin-plus joli": "^ 3.1.2",
"eslint-plugin-react": "^ 7.14.3",
"eslint-plugin-react-hooks": "^ 1.7.0",
"node-sass": "^ 4.13.0",
"plus jolie": "^ 1.19.1"
}
}

Ma solution à ce problème était la suivante (notez que sous Windows, vous avez besoin \ délimiteurs / - il est pris en compte dans l'expression rationnelle):

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

Il y avait également des erreurs supplémentaires dans IE 11 telles que:

Erreur de sécurité
L'erreur que vous avez fournie ne contient pas de trace de pile.
Incompatible SockJS! Le site principal utilise: "1.3.0", l'iframe: "1.4.0".

Ceux-ci ont été résolus en modifiant le registre Windows comme il est dit ici
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

A savoir j'ai créé

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

pour augmenter la quantité autorisée de Websockets par page. Après cela, le problème est apparu moins souvent (assez rarement pour déboguer sans trop d'inconvénients, mais quand il réapparaît, vous devez ouvrir un autre onglet et fermer le courant).

J'ai enfin une solution de contournement après avoir examiné cela pendant quelques jours

J'ai dû changer le client pour WebpackDevServer de react-dev-utils / webpackHotDevClient à l'alternative de webpack / hot / dev-server

Vous devez aller dans votre fichier webpack.config.js et échanger cette ligne:

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

avec celui-ci:

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

@ a1g0rithm c'est du travail pour moi.

@ a1g0rithm où avez-vous trouvé webpack.config.js?

La solution fournie par @ a1g0rithm est la seule qui a fonctionné pour moi après la mise à niveau d'une ancienne application CRA éjectée de webpack v2 vers v4. Le fichier webpack.dev.config contient ce message:

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

Décommentez simplement les deux premiers require.resolve s et commentez le dernier:

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

Je pense que c'était une mauvaise importation qui a importé le webpack du client en développement. Corrigé dans la v4