Razzle: IE 11: сломан из-за webpackHotDevClient.

Думаю, теперь я вижу, что приложение create-react-app больше не поддерживает IE 11 или меньше по умолчанию, но есть возможность подписки с отдельным пакетом . Может, это просто документация? Если да, то попробую обновить.

Теперь я вижу, что документы о полифилах были обновлены для версии v3.

Однако я не думаю, что это решит проблему. Похоже, что-то подобное отслеживается в CRA: https://github.com/facebook/create-react-app/issues/5336. Это связано с тем, что Map не определено, что имеет смысл как что-то исправимое с полифилом.

Однако все эти вещи о поддержке IE 9-11 касаются полифиллинга. Я не думаю, что полифил может исправить функцию стрелки. Код просто не переносится для старых браузеров, и я не вижу, как это можно исправить без обновления самой зависимости.

Это также проблема с ansi-regex , strip-ansi и другими. файлы в react-dev-utils (включая formatWebpackMessages.js ) и прочие файлы chalk в соответствии с требованиями react-dev-utils . Я не очень хорошо знаком с react-dev-utils, поэтому я не уверен, является ли это их ошибкой, или этот материал просто не должен быть в комплекте или что-то еще.

Здесь вам нужно решить две вещи:

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 ( конфигурацию webpack в CRA2 ), а Razzle - нет. С Razzle вы можете либо использовать более старые версии этих модулей _, либо_ использовать ловушки Razzle для изменения конфигурации веб-пакета, чтобы включить определенные node_modules, которые вы хотите скомпилировать .

Я до сих пор не понимаю, что нужно изменить, чтобы он работал в IE 11. Даже весь мой производственный пакет теперь содержит const s и стрелочные функции.
Нужно ли мне выяснять, какие модули нуждаются в транспиляции, просматривая минифицированный пакет? Это было бы отстойно, есть ли более доступный способ?

У меня все получилось:

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

немного раздражает

Вы можете выполнить следующие действия, чтобы решить свою проблему:
https://create-react-app.dev/docs/supported-browsers-features/#supported -browsers

Обновите 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 пакета.

{
"name": "typescript_tutorial",
"версия": "0.1.0",
"частный": правда,
"dependencies": {
"@ 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",
"реагировать": "^ 16.12.0",
"react-app-polyfill": "^ 1.0.5",
"react-dom": "^ 16.12.0",
"react-scripts": "3.3.0",
"машинописный текст": "^ 3.7.4"
},
"scripts": {
"start": "запуск сценариев реакции",
"build": "сборка сценариев реакции",
"test": "test-scripts test",
"eject": "реагировать-скрипты извлекать"
},
"eslintConfig": {
"расширяет": "приложение-реакция"
},
"список браузеров": {
"производство": [
"> 0,2%",
"не мертв",
"не op_mini все"
],
"разработка": [
"> 0,2%",
"не мертв",
"не op_mini все",
"последняя хромированная версия",
"последняя версия 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"
          ]
        }
      }
    ]
  ]
}

Также в IE 11 были некоторые дополнительные ошибки, такие как:

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)

для увеличения допустимого количества веб-сокетов на странице. После этого проблема появлялась реже (достаточно редко, чтобы отладить без особых неудобств, но когда она появляется снова, вам нужно открыть другую вкладку и закрыть текущую).

У меня наконец есть обходной путь после просмотра этого в течение пары дней

Мне пришлось сменить клиент для WebpackDevServer с response-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 где вы нашли webpack.config.js?

Решение, предоставленное @ a1g0rithm, - единственное, которое сработало для меня после обновления старого, извлеченного приложения CRA с webpack v2 до v4. Файл 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'),

Просто раскомментируйте первые два require.resolve s и прокомментируйте последний:

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

Я думаю, что это был плохой импорт, который импортировал веб-пакет клиента, находящегося в разработке. Исправлено в v4