React应用在IE11中无法运行，提示Minified React error #185

看起来你已经精准定位到了核心问题——IE11缺失ES6特性的polyfill，但仅引入babel-polyfill可能还不够，毕竟create-react-app在不同版本里对polyfill的处理逻辑有差异，甚至可能存在第三方依赖未被转译的情况。下面是一步步的实操解决方案：

1. 替换babel-polyfill为core-js（官方推荐方案） #

从react-scripts@2.0.0开始，官方不再建议使用babel-polyfill，转而推荐使用core-js（它是babel-polyfill的底层依赖，兼容性覆盖更全面）。你可以删掉原来的import "babel-polyfill"，换成：

import 'core-js/stable';
import 'regenerator-runtime/runtime';

这两行代码会自动polyfill所有ES6+核心特性，包括你缺失的Symbol。

2. 确保browserslist配置包含IE11 #

create-react-app会根据package.json里的browserslist规则来决定需要为哪些浏览器生成polyfill。打开你的package.json，检查是否存在IE11的配置：

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all",
    "IE 11"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "IE 11"
  ]
}

如果没有就补上这段配置，这样工具链会针对性地为IE11生成所需的兼容代码。

3. 排查第三方依赖是否未被转译 #

部分npm包发布时采用ES6格式，而create-react-app默认不会转译node_modules里的代码，这会导致IE11无法识别这些包中的Symbol等特性。解决方法如下：

• 如果你使用react-app-rewired或craco（用于修改create-react-app默认配置的工具），可以在配置文件中将这些依赖加入转译列表。比如用craco的话，在craco.config.js中添加：

module.exports = {
  webpack: {
    configure: (config) => {
      // 找到处理js/jsx的规则
      const jsRule = config.module.rules.find(rule => rule.oneOf).oneOf.find(rule => rule.test.test('.js'));
      // 替换成你需要转译的第三方包名称，比如lodash-es
      jsRule.include.push(/node_modules\/lodash-es/);
      return config;
    }
  }
};

• 若不想使用自定义配置工具，也可以尝试寻找该依赖的ES5版本（如果存在的话），或者联系包作者更新兼容性。

4. 清空缓存并重新构建 #

旧缓存可能导致polyfill未被正确注入，执行以下步骤：

• 删除node_modules/.cache文件夹
• 运行npm run build --no-cache重新构建生产环境包
• 在IE11中测试新生成的构建文件

5. 开发环境下测试IE11 #

如果需要在开发环境验证IE11兼容性，可修改package.json中的start命令：

"scripts": {
  "start": "react-scripts start",
  "start:ie": "cross-env BROWSER=none react-scripts start"
}

运行npm run start:ie后，手动在IE11中打开http://localhost:3000（IE11不支持热更新，修改代码后需手动刷新页面）。

按照这些步骤操作后，应该能解决IE11中Symbol()未定义的问题，让你的应用正常运行。

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