React应用在IE/Edge显示空白无报错，已试babel-polyfill仍无效

哎，这个Edge和IE的坑我之前踩过好几次！你的配置看起来已经有基础的polyfill，但可能几个关键点没到位，我给你梳理下排查和修复的步骤，按优先级来试：

1. 修正babel-preset-env的配置，让polyfill真正生效 #

你的.babelrc里用了env预设，但没开useBuiltIns，这会导致core-js的polyfill没按需加载或者完全生效。改成下面这样试试：

{
  "presets": [
    ["env", { 
      "targets": { 
        "browsers": [ "> 1%", "last 2 versions", "ie >= 10" ] 
      },
      "useBuiltIns": "usage",
      "corejs": 3 // 如果你装的是core-js@3，必须指定版本；如果是v2，改成2或者删掉这行
    }],
    "stage-2",
    "react"
  ],
  "plugins": [ "syntax-dynamic-import" ]
}

• 明确加上ie >=10的目标，避免模糊的浏览器范围漏掉IE/Edge
• useBuiltIns: "usage"会让babel自动根据目标浏览器补需要的polyfill，不用手动在index.js里全量导入core-js（当然全量也可以，但按需更高效）

2. 确保polyfill最先加载（如果不用useBuiltIns的话） #

要是你不想用useBuiltIns，可以把polyfill放到webpack入口最前面，保证它在React代码之前加载：

// webpack.prod.js
module.exports = {
  entry: ['core-js/stable', 'regenerator-runtime/runtime', './src/index.js'],
  // ... 其他配置
};

因为core-js没包含regenerator runtime，而React代码里的async/await或者生成器函数需要这个polyfill，IE/Edge刚好缺这个。

3. 转译node_modules里的第三方依赖 #

有些第三方包可能用了未转译的ES6+语法，而你当前webpack配置排除了node_modules，导致这些代码在IE里跑不起来。可以修改babel-loader的规则，把需要转译的包加进来：

// webpack.prod.js
module: {
  rules: [
    { 
      test: /\.js$/, 
      loader: 'babel-loader', 
      // 比如如果react-router-dom、axios这些包需要转译，就这么写
      exclude: /node_modules(?!\/(react-router-dom|axios))/ 
    },
    // ... 其他规则
  ]
}

你可以先临时去掉整个exclude（只是测试，别长期用，影响打包速度），如果能正常运行，再逐个排查哪个包需要转译。

4. 再仔细检查IE/Edge的控制台 #

有时候IE的控制台很坑，必须先打开开发者工具，再刷新页面才会显示错误，默认不会记录刷新前的错误。按F12打开开发者工具，切到「控制台」标签，再刷新页面，说不定能看到隐藏的错误提示。

5. 调整webpack的devtool配置 #

如果你的webpack用了devtool: 'cheap-module-source-map'这类IE不支持的source map类型，也可能导致页面空白。生产环境可以试试换成devtool: 'source-map'，或者干脆关掉source map测试：

// webpack.prod.js
module.exports = {
  // ...
  devtool: 'source-map', // 或者直接写false
  // ...
};

6. 检查DOM和CSS的兼容性 #

确保document.getElementById('root')确实存在，而且IE/Edge能识别。另外，排查下是不是CSS导致元素被隐藏了（比如display: none或者visibility: hidden），这种情况控制台也不会报错，但页面就是空白。

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