React 16.2.0在IE9运行报错：'Set'或'Map'未定义如何解决？

嘿，这个问题我太熟悉了！之前帮好几个开发者排查过类似的IE兼容性坑，原因其实很直白：

React 16及后续版本不再默认包含ES6特性的polyfill，而IE9作为非常老旧的浏览器，完全不支持Set、Map这些ES6原生对象——当React内部代码试图调用它们时，自然就会抛出"undefined"的错误。

下面是亲测有效的解决步骤：

• 第一步：安装适配的polyfill包
  我们需要手动引入ES6特性的兼容补丁，推荐使用core-js@2版本（core-js@3对IE9的支持不够完善，和React 16.2的适配性更好）。在项目根目录执行安装命令：

  npm install core-js@2 --save
  # 或者用yarn
  yarn add core-js@2
  

• 第二步：在入口文件顶部优先加载polyfill
  找到项目的入口文件（通常是src/index.js），一定要在引入React之前，先加载Set和Map的polyfill：

  // 先加载polyfill，确保React启动前这些对象已存在
  import 'core-js/es6/map';
  import 'core-js/es6/set';
  
  // 之后再引入React和业务代码
  import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  
  ReactDOM.render(<App />, document.getElementById('root'));
  

  如果后续还遇到其他ES6特性的兼容性问题，也可以直接引入整个ES6的polyfill：import 'core-js/es6';，不过按需引入能让打包体积更小。

• 额外配置（手动Webpack/Babel项目适用）
  如果你不是用Create React App而是自己配置的Webpack和Babel，需要确保Babel配置里开启polyfill支持。比如在.babelrc中添加：

  {
    "presets": [
      ["react", { "useBuiltIns": "entry" }]
    ]
  }
  

  这样Babel会帮你正确处理polyfill的引入逻辑。

完成这些步骤后重新打包项目，在IE9里运行应该就不会再出现这个错误了！

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