Razzle: IE 11: roto con webpackHotDevClient.

Creo que ahora veo que create-react-app ya no es compatible con IE 11 o menos de forma predeterminada, pero hay una opción de suscripción con un paquete separado . ¿Quizás esto es solo una cuestión de documentación? Si es así, intentaré actualizar.

Ahora veo que los documentos sobre polyfills se actualizaron para v3.

Sin embargo, no creo que esto resuelva el problema. Parece que se está rastreando algo similar en CRA: https://github.com/facebook/create-react-app/issues/5336. Ese está relacionado con que Map no esté definido, lo que tendría sentido como algo reparable con un polyfill.

Sin embargo, todas estas cosas sobre la compatibilidad con IE 9-11 tienen que ver con el polyfilling. No creo que un polyfill pueda arreglar una función de flecha. El código simplemente no se transpila para los navegadores más antiguos y no veo cómo se puede solucionar sin actualizar la dependencia en sí.

Esto también es un problema con ansi-regex , strip-ansi , algunos misc. archivos en react-dev-utils (incluidos formatWebpackMessages.js ) y archivos misceláneos chalk como lo requiere react-dev-utils . No estoy muy familiarizado con react-dev-utils, así que no estoy seguro de si esto es un error con ellos o si se supone que estas cosas no deben estar en el paquete o qué.

Hay dos cosas que tienes que resolver aquí:

1. Polyfills ya no está disponible de forma predeterminada (lo mismo ocurre con CRA2). Polyfills resolverá problemas relacionados con Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc. Hay una docena de formas de manejar esto que van desde react-app-polyfill hasta requerir los polyfills de core-js específicos que su aplicación específica necesita; Creo que Babel en sí puede ayudar a determinar qué core-js polyfills necesita su código con la configuración adecuada (¿podría haber un problema aquí? No estoy seguro de por qué CRA2 no siguió esta ruta).

2. Algunos autores de bibliotecas ya no distribuyen versiones es5 de sus módulos ( ansi-regex , react-dev-utils , etc., etc.). Si ve que IE11 se ahoga con flechas gruesas, este es el problema al que se enfrenta. CRA2 resuelve esto mediante la transpilación de node_modules ( webpack conf en CRA2 ) mientras que Razzle no lo hace. Con Razzle, puede usar versiones anteriores de esos módulos _o_ usar los ganchos de Razzle para modificar la configuración del paquete web para incluir los módulos de nodo

Todavía no obtengo lo que se necesita para cambiar para que funcione para IE 11. Incluso mi paquete de producción completo ahora contiene const sy funciones de flecha.
¿Necesito averiguar qué módulos necesitan transpilarse mirando el paquete minificado? Eso apestaría, ¿hay alguna forma más accesible?

Esto hizo que las cosas funcionen para mí:

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

un poco molesto

Puede seguir a continuación para resolver su problema:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Actualice package.json con la lista de navegadores a continuación para que funcione para 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 esta manera, al menos logrará que cumpla con su código sin la función const & arrow , pero el problema es que después de eso estoy atascado con webpackHotDevClient comienza a romperse y no tiene ni idea en la consola también.

He probado muchas soluciones en torno a este problema.
ninguna de las soluciones proporcionadas funciona en desarrollo en IE11 o en el borde.
Versión de IE: 11.864.17763.0

A continuación se muestra el archivo json de mi paquete.

{
"nombre": "mecanografiado_tutorial",
"versión": "0.1.0",
"privado": verdadero,
"dependencias": {
"@ testing-library / jest-dom": "^ 4.2.4",
"@ testing-library / react": "^ 9.4.0",
"@ testing-library / user-event": "^ 7.2.1",
"@ tipos / broma": "^ 24.0.25",
"@ tipos / nodo": "^ 12.12.24",
"@ types / react": "^ 16.9.17",
"@ types / react-dom": "^ 16.9.4",
"reaccionar": "^ 16.12.0",
"react-app-polyfill": "^ 1.0.5",
"react-dom": "^ 16.12.0",
"react-scripts": "3.3.0",
"mecanografiado": "^ 3.7.4"
},
"guiones": {
"start": "react-scripts start",
"build": "build de react-scripts",
"prueba": "prueba de react-scripts",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extiende": "reaccionar-aplicación"
},
"lista de navegadores": {
"producción": [
"> 0,2%",
"no muerto",
"no op_mini all"
],
"desarrollo": [
"> 0,2%",
"no muerto",
"no op_mini all",
"última 1 versión de Chrome",
"última 1 versión de Firefox",
"última 1 versión safari",
"últimas 2 es decir, versión"
]
},
"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",
"más bonita": "^ 1.19.1"
}
}

Mi solución a este problema fue la siguiente (tenga en cuenta que en Windows necesita \ delimitadores en las rutas, mientras que en Linux / , se tiene en cuenta en la expresión regular):

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

También hubo algunos errores adicionales en IE 11 como:

Error de seguridad
El error que proporcionó no contiene un seguimiento de pila.
SockJS incompatible! El sitio principal utiliza: "1.3.0", el iframe: "1.4.0".

Estos se resolvieron editando el registro de Windows como se dice aquí
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

A saber, yo creé

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

para aumentar la cantidad permitida de websockets por página. Después de eso, el problema apareció con menos frecuencia (rara vez lo suficiente para depurar sin muchos inconvenientes, pero cuando vuelve a aparecer, debe abrir otra pestaña y cerrar la actual).

Finalmente tengo una solución después de mirar esto durante un par de días.

Tuve que cambiar el cliente para WebpackDevServer de react-dev-utils / webpackHotDevClient a la alternativa de webpack / hot / dev-server

Tienes que ir a tu archivo webpack.config.js e intercambiar esta línea:

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

Con este:

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

@ a1g0rithm esto es un trabajo para mí.

@ a1g0rithm ¿dónde encontraste webpack.config.js?

La solución proporcionada por @ a1g0rithm es la única que funcionó para mí después de actualizar una aplicación CRA expulsada anterior de webpack v2 a v4. El archivo webpack.dev.config contiene este mensaje:

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

Simplemente descomente los dos primeros require.resolve sy comente el último:

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

Creo que esta fue una mala importación que importó el paquete web al cliente en desarrollo. Corregido en v4