默认Create React App在IE Edge无法运行，配置后仍报错求助

我之前也碰到过类似的React项目在旧浏览器（包括旧版Edge）里白屏的情况，结合你的配置来看，问题主要出在自定义Babel配置冲突和Polyfill导入/配置不当上，咱们一步步来修复：

1. 删除自定义的.babelrc文件 #

Create React App（CRA）自带了一套预配置的Babel规则，你手动添加的.babelrc会和CRA的默认配置冲突，导致转译不生效。直接删掉这个文件就好，CRA会自动使用它内置的Babel配置来处理兼容问题。

2. 调整index.js的Polyfill导入顺序和内容 #

你现在导入了多个重复的Polyfill（@babel/polyfill、core-js和react-app-polyfill），这不仅没必要，还可能引发冲突。react-app-polyfill已经封装了适配IE所需的所有Polyfill，只需要保留它的导入，并且必须放在所有其他导入的最前面：

// 优先导入IE兼容的Polyfill，顺序不能乱
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

// 下面是原有代码，保持不变
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();

3. 修复package.json的配置细节 #

3.1 更新react-scripts版本 #

你当前使用的react-scripts@3.3.0存在一些旧浏览器兼容的已知问题，建议升级到同大版本的稳定版（比如3.4.4），这个版本对IE/旧Edge的支持更完善：

npm install react-scripts@3.4.4 --save

3.2 优化browserslist配置 #

确保你的browserslist明确覆盖目标浏览器，包括旧版Edge（基于EdgeHTML的版本）：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "ie 10",
    "ie 11",
    "edge <= 18"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "ie 11",
    "edge <= 18"
  ]
}

4. 清理依赖缓存并重新安装 #

有时候缓存会导致依赖加载异常，执行以下步骤彻底重置依赖：

• 删除node_modules文件夹
• 删除package-lock.json文件
• 重新执行：

npm install

5. 验证修复效果 #

重新启动项目：

npm start

现在再去Chrome和IE/旧Edge中访问localhost:3000，应该就能正常显示默认的React应用了。

补充说明 #

默认的CRA项目之所以在IE中无法运行，是因为它默认没有包含IE所需的Polyfill，也没有配置对应的浏览器兼容规则，所以必须手动添加react-app-polyfill并配置browserslist才能让它在旧浏览器中正常工作。

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