使用React17、Next.js11时如何处理各依赖包的IE11兼容性问题

方案1：给依赖包提交贡献适配IE11 #

不推荐作为当下解决项目问题的首选方案。一是目前绝大多数前端开源包已经明确停止IE11适配，提交的适配PR被合并的概率极低；二是逐个排查、修改、验证依赖包的时间成本极高，完全无法满足项目正常的迭代进度要求。仅可作为个人开源贡献的长期选择，不适用于业务项目的问题修复。

方案2：自定义Webpack/Babel配置处理依赖兼容 #

首先明确：Webpack和Babel可以处理node_modules下依赖包的兼容性问题。你之前遇到的问题根源就是Next.js默认配置下，Babel只会转译项目本身的源码，不会处理node_modules内的依赖，所以那些未编译为ES5的依赖携带的扩展运算符等ES6+语法会直接在IE11环境下报错，你引入的polyfill只补全了IE11缺失的API，没有处理语法转译，因此无法解决问题。

具体落地步骤如下：

• 第一步：安装next-transpile-modules依赖，这是Next.js官方生态提供的工具，专门用于指定需要转译的node_modules依赖，无需手动编写复杂的Webpack配置。
• 第二步：修改next.config.js配置，将你排查出的存在兼容问题的依赖包名填入配置项：

const withTM = require('next-transpile-modules')(['有问题的依赖包1', '有问题的依赖包2']);

module.exports = withTM({
  // 保留你原有项目的其他Next.js配置
});

• 第三步：调整Babel配置，确保转译目标包含IE11，在项目根目录新增.babelrc文件：

{
  "presets": [
    ["next/babel", {
      "targets": {
        "ie": "11"
      }
    }]
  ]
}

• 第四步：调整polyfill引入逻辑，在pages/_app.js的最顶部引入所有必要的polyfill：

// 必须放在所有import的最前面
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
// 后续原有代码

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