Razzle: IE 11：使用webpackHotDevClient损坏。

我想我现在看到的是create-react-app在默认情况下不再一个单独的package可供选择加入。 也许这只是一个文档资料？ 如果是这样，我将尝试更新。

现在，我看到有关polyfill的

但是，我认为这不能解决问题。 似乎在CRA中正在跟踪类似的内容： https ： Map的未定义有关，这可以说是可修复的（带有polyfill）。

支持IE 9-11的所有这些都是关于polyfilling的。 我认为polyfill无法修复箭头功能。 该代码只是不为旧版浏览器进行转译，而且我不明白如何在不更新依赖项本身的情况下解决该问题。

这也是ansi-regex ， strip-ansi和其他问题。 react-dev-utils （包括formatWebpackMessages.js ），以及chalk要求的其他react-dev-utils chalk文件。 我对react-dev-utils并不十分熟悉，所以我不确定这是否是它们的错误，或者这些东西是否应该包含在捆绑包中或什么东西。

您必须在这里解决两件事：

1. 默认情况下不再使用Polyfill（CRA2也是如此）。 Polyfills将解决与Promise / Map / Set / Symbol / Object.assign / Array.isArray / String.startsWith / etc相关的问题。 从react-app-polyfill到要求特定应用程序需要特定的core-js polyfills，有十多种方法可以解决此问题。 我认为Babel本身可以通过适当的配置帮助找出哪个core-js可以满足您的代码需求（这里可能有一个问题？我不确定CRA2为什么不采用这种方法）。

2. 一些库作者不再分发其模块的es5版本（ ansi-regex ， react-dev-utils等）。 如果您在粗箭头上看到IE11令人窒息，这就是您面临的问题。 CRA2通过转译node_modules （ CRA2中的webpack conf ）解决了这一问题，而Razzle则没有。 使用Razzle，您可以使用这些模块的较旧版本，也可以使用Razzle的钩子来修改webpack配置，以包括要编译的特定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”，
“ version”：“ 0.1.0”，
“私人”：是的，
“依赖关系”：{
“ @ 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”，
“反应脚本”：“ 3.3.0”，
“ typescript”：“ ^ 3.7.4”
}，
“脚本”：{
“ start”：“反应脚本开始”，
“ build”：“ react-scripts build”，
“ test”：“反应脚本测试”，
“ eject”：“反应脚本弹出”
}，
“ eslintConfig”：{
“ extends”：“ react-app”
}，
“浏览器列表”：{
“生产”： [
“> 0.2％”，
“没死”，
“不是全部op_mini”
]，
“发展”： [
“> 0.2％”，
“没死”，
“不是全部op_mini”，
“最后1个chrome版本”，
“最新的1个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中还存在一些其他错误，例如：

安全错误
您提供的错误不包含堆栈跟踪。
不兼容的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)

增加每页允许的WebSocket数量。 之后，该问题出现的频率降低了（很少有调试的麻烦，但是再次出现时，您需要打开另一个选项卡并关闭当前选项卡）。

在看了几天之后，我终于有了解决方法

我不得不将WebpackDevServer的客户端从react-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提供的有用的解决方案。 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并注释最后一个即可：

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

我认为这是错误的导入，已将webpack导入开发中的客户端。 在v4中已修复