React在IE11与Edge浏览器异常：Chrome正常但IE空白、Edge行为异常求解决

我来帮你捋捋这个问题——IE11和旧Edge的兼容性坑确实不少，哪怕装了polyfill也可能有遗漏的细节，咱们一步步排查：

1. 确认polyfill的加载顺序与完整性 #

• 别只满足于“装了polyfill”，得确保它们在React代码之前加载。比如在项目入口文件的最顶部，先导入核心polyfill：

  // 入口文件第一行开始
  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  

• IE11需要覆盖ES6+的全量核心特性，比如Promise、Array.prototype.includes、Object.assign这些，自动引入的polyfill有时候会漏掉你代码里用到的小众特性，最好手动确认这些关键API是否被补全。

2. 检查Babel配置是否精准适配IE11 #

• 确保你的Babel配置明确指定了目标浏览器为IE11，比如在babel.config.js里：

  {
    "presets": [
      ["@babel/preset-env", {
        "targets": {
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": 3
      }],
      "@babel/preset-react"
    ]
  }
  

• 这里useBuiltIns: "usage"会根据代码实际用到的特性自动引入polyfill，比全局导入更精准，但记得要指定corejs版本（建议用3.x）。

3. 定位IE11控制台的具体报错 #

• 空白页面90%是脚本错误导致代码中断了！打开IE11的开发者工具（按F12），切换到控制台标签，看看有没有类似SCRIPT5009: 'Promise' is undefined这类报错，直接定位缺失的polyfill或未转译的语法。
• 还要注意第三方库的兼容性：有些依赖包可能没做IE11适配，你需要在webpack配置里让babel-loader转译这些库，比如：

  module: {
    rules: [
      {
        test: /\.js$/,
        // 排除node_modules里除了xxx库之外的内容，让babel转译xxx
        exclude: /node_modules\/(?!(xxx)\/)/,
        use: 'babel-loader'
      }
    ]
  }
  

4. 旧Edge的特殊适配 #

• 旧Edge（EdgeHTML内核）和IE11兼容性有差异，试试用生产包测试：开发模式下的调试代码、警告信息可能会在旧Edge里引发异常，执行npm run build后部署生产包再测试。
• 检查CSS兼容性：旧Edge对position: sticky、某些Flexbox写法支持不好，可能导致页面布局异常，试试补全CSS前缀或者替换成兼容写法。

5. 其他容易忽略的坑 #

• 如果你用了mini-css-extract-plugin，这个插件在IE11下可能有兼容性问题，暂时换成style-loader试试。
• 确认React版本：如果用了Hooks，必须是React 16.8+，且Hooks相关代码被Babel正确转译了。

总之，先抓IE11控制台的报错信息，这是最快定位问题的关键，很多时候不是polyfill没装，而是装错了顺序或者漏了某个关键特性~

内容的提问来源于stack exchange，提问作者DadyByte