IE11中React项目触发“Object doesn't support property or method 'includes'”异常

嘿，这个问题我之前在维护兼容IE11的React项目时也踩过坑！咱们来一步步拆解原因和解决方案：

问题根源分析 #

IE11本身不支持ES6的Array.prototype.includes和String.prototype.includes方法。虽然你已经引入了babel-polyfill，但出现“只有跳转时报错、刷新后正常”的情况，大概率是路由懒加载/代码分割导致的：

• 当你从其他路由跳转过来时，目标路由的组件是动态加载的，此时polyfill可能还没覆盖到这个异步加载的模块；
• 而直接刷新页面时，整个应用bundle从头加载，polyfill会先于组件代码执行，所以能正常工作。

具体解决方案 #

1. 改用create-react-app官方推荐的polyfill包 #

create-react-app有专门的polyfill工具，比直接用babel-polyfill更适配项目，步骤如下：

• 先安装依赖：

  npm install react-app-polyfill
  

• 在src/index.js的最顶部（所有其他import之前）添加：

  import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable';
  

  这一步很关键，必须确保polyfill最先加载，才能覆盖后续所有模块的API。

2. 确认Babel配置（如果项目已eject） #

如果你的项目已经执行过npm run eject，需要检查Babel的@babel/preset-env配置，确保它正确针对IE11做兼容：
在项目根目录的babel.config.js或者.babelrc中添加/修改配置：

{
  "presets": [
    ["react-app", {
      "useBuiltIns": "entry",
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

useBuiltIns: 'entry'会确保所有目标浏览器缺失的API都被polyfill，而targets明确指定兼容IE11。

3. 手动替换组件中的includes调用 #

如果上述配置后仍有问题，建议检查目标路由组件的代码，看看是不是自己写的代码里直接用了includes：

• 数组判断：把array.includes(item)替换成array.indexOf(item) !== -1
• 字符串判断：把string.includes(substr)替换成string.indexOf(substr) !== -1
  如果是第三方依赖库用了includes，可以尝试升级到兼容IE11的版本，或者给该依赖单独做polyfill。

4. 调整路由懒加载的顺序 #

如果目标路由用了React.lazy或者loadable-components做懒加载，确保polyfill在懒加载组件之前加载。比如在路由配置文件的最顶部也引入一次polyfill（虽然重复，但能保证异步模块加载时API已被修补）。

总结 #

这个问题核心是polyfill的加载时机没有覆盖到动态加载的组件，通过调整polyfill的引入顺序、配置Babel的兼容目标，或者手动替换不兼容的API调用，就能解决IE11中跳转特定路由时报错的问题。

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