Razzle: IE 11: quebrado com webpackHotDevClient.

Acho que estou vendo agora que criar-reagir-app não suporta mais o IE 11 ou menos por padrão, mas há um opt-in com um pacote separado . Talvez isso seja apenas uma coisa de documentação? Se sim, vou tentar atualizar.

Agora vejo que os documentos sobre polyfills foram atualizados para a v3.

No entanto, não acho que isso resolva o problema. Parece que algo semelhante está sendo rastreado no CRA: https://github.com/facebook/create-react-app/issues/5336. Esse está relacionado ao fato de Map ser indefinido, o que faria sentido como algo corrigível com um polyfill.

No entanto, todas essas coisas sobre o suporte ao IE 9-11 são sobre polyfilling. Não acho que um polyfill consiga consertar uma função de seta. O código simplesmente não é transpilado para navegadores mais antigos e não vejo como isso pode ser corrigido sem atualizar a própria dependência.

Este também é um problema com ansi-regex , strip-ansi , alguns misc. arquivos em react-dev-utils (incluindo formatWebpackMessages.js ), e vários arquivos chalk conforme exigido por react-dev-utils . Não estou muito familiarizado com react-dev-utils, então não tenho certeza se isso é um bug com eles ou se essas coisas simplesmente não deveriam estar no pacote ou o quê.

Há duas coisas que você precisa resolver aqui:

1. Polyfills não estão mais em por padrão (o mesmo vale para CRA2). Polyfills resolverá problemas relacionados a Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc. Há uma dúzia de maneiras de lidar com isso, variando de react-app-polyfill até exigir os polyfills core-js específicos de que seu aplicativo específico precisa; Acho que o próprio Babel pode ajudar a descobrir quais polyfills core-js seu código precisa com a configuração apropriada (pode haver um problema aqui? Não sei por que o CRA2 não seguiu esse caminho).

2. Alguns autores de bibliotecas não distribuem mais versões es5 de seus módulos ( ansi-regex , react-dev-utils , etc, etc). Se você vir o IE11 engasgando com setas grossas, esse é o problema que você está enfrentando. CRA2 resolve isso transpilando node_modules ( webpack conf em CRA2 ), enquanto Razzle não. Com o Razzle, você pode usar versões mais antigas desses módulos _ou_ usar os ganchos do Razzle para modificar a configuração do webpack para incluir os node_modules específicos que deseja compilar .

Ainda não entendi o que é necessário mudar para fazê-lo funcionar no IE 11. Até mesmo todo o meu pacote de produção agora contém const funções de seta.
Preciso descobrir quais módulos precisam ser transpilados, olhando para o pacote reduzido? Isso seria péssimo, existe uma maneira mais acessível?

Isso fez com que as coisas funcionassem para mim:

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

meio chato

Você pode seguir abaixo para resolver seu problema:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Atualize o package.json com a lista de navegadores abaixo para fazê-lo funcionar no 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"
    ]
  },

Desta forma, você pelo menos fará com que seu código seja compatível sem a função const & arrow , mas depois disso eu estou preso com webpackHotDevClient começa a quebrar e não obter nenhuma pista no console também.

Tentei muitas soluções para esse problema.
nenhuma das soluções fornecidas está funcionando em desenvolvimento no IE11 ou borda.
Versão do IE: 11.864.17763.0

Abaixo está o meu arquivo de pacote json.

{
"nome": "typescript_tutorial",
"versão": "0.1.0",
"privado": verdadeiro,
"dependências": {
"@ 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",
"@ tipos / nó": "^ 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",
"texto datilografado": "^ 3.7.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "teste react-scripts",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"lista de navegadores": {
"Produção": [
"> 0,2%",
"não morto",
"não op_mini all"
],
"desenvolvimento": [
"> 0,2%",
"não morto",
"não op_mini all",
"última 1 versão do Chrome",
"última 1 versão do firefox",
"última 1 versão safari",
"últimas 2 ou seja, versão"
]
},
"devDependencies": {
"eslint-config-airbnb": "^ 18.0.1",
"eslint-config-mais bonita": "^ 6.9.0",
"eslint-plugin-import": "^ 2.18.2",
"eslint-plugin-jsx-a11y": "^ 6.2.3",
"eslint-plugin-mais bonita": "^ 3.1.2",
"eslint-plugin-react": "^ 7.14.3",
"eslint-plugin-react-hooks": "^ 1.7.0",
"node-sass": "^ 4.13.0",
"mais bonita": "^ 1.19.1"
}
}

Minha solução para este problema foi a seguinte (observe que no Windows você precisa de delimitadores \ nos caminhos, enquanto no Linux / - isso é levado em consideração no regex):

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

Além disso, havia alguns erros adicionais no IE 11, como:

Erro de segurança
O erro fornecido não contém rastreamento de pilha.
SockJS incompatível! O site principal usa: "1.3.0", o iframe: "1.4.0".

Eles foram resolvidos editando o registro do Windows como é dito aqui
https://stackoverflow.com/questions/52549799/securityerror-on-ie11-when-initializing-websocket

Ou seja, eu criei

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

para aumentar a quantidade permitida de websockets por página. Depois disso, o problema apareceu com menos frequência (raramente o suficiente para depurar sem muitos inconvenientes, mas quando reaparecer é necessário abrir outra guia e fechar a atual).

Eu finalmente tenho uma solução alternativa depois de olhar para isso por alguns dias

Tive que mudar o cliente para WebpackDevServer de react-dev-utils / webpackHotDevClient para a alternativa de webpack / hot / dev-server

Você deve acessar o arquivo webpack.config.js e trocar esta linha:

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

com este:

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

@ a1g0rithm isso é trabalho para mim.

@ a1g0rithm onde você encontrou webpack.config.js?

A solução fornecida por @ a1g0rithm é a única que funcionou para mim depois de atualizar um aplicativo CRA antigo e ejetado do webpack v2 para v4. O arquivo webpack.dev.config contém esta mensagem:

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

Simplesmente descomente os dois primeiros require.resolve s e comente o último:

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

Acho que foi uma importação ruim que importou o webpack do cliente em desenvolvimento. Corrigido na v4