React应用在IE11中显示空白页并报语法错误的问题求助

你遇到的问题很典型——IE11完全不支持ES6的class语法，而React 16本身也需要额外的polyfill才能在旧浏览器上正常运行。结合你的配置，我整理了以下修复步骤：

1. 升级Babel配置，适配IE11 #

你目前使用的是Babel 6的旧预设（比如babel-preset-es2015），这些已经被废弃，换成@babel/preset-env能更精准地针对IE11做语法转译。

安装必要依赖 #

打开终端执行：

npm install @babel/core @babel/preset-env @babel/preset-react babel-loader@8.x core-js@3 --save-dev

创建/更新.babelrc文件 #

在项目根目录新建或修改.babelrc，内容如下：

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

这个配置会自动根据IE11的能力，转译所有不支持的ES6+语法，并按需引入core-js提供的polyfill，不用手动在入口文件写一堆import。

2. 清理旧的Babel依赖 #

在package.json中移除这些废弃的包：

• babel-preset-es2015
• babel-preset-stage-1
• 其他Babel 6相关的冗余依赖

然后执行npm install更新依赖。

3. 调整Webpack配置 #

确保你的webpack规则里的babel-loader正确关联新的Babel核心：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader' // 现在会自动使用@babel/core
      }
    },
    // 你的scss规则保持不变
  ]
}

4. 额外的兼容性检查 #

如果做完以上步骤还是有问题，检查以下两点：

• 某些第三方依赖可能本身使用了ES6+语法且未转译，你可以把它们从exclude: /node_modules/中移除，比如：

  exclude: /node_modules(?!\/your-package-name)/
  

• 确保入口文件没有遗漏关键polyfill（不过useBuiltIns:usage已经帮你处理了，这步是兜底）：

  import 'core-js/stable';
  import 'regenerator-runtime/runtime';
  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  

完成这些步骤后，重新打包或启动开发服务器，IE11应该就能正常加载你的React应用了。

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