React-hook-form搭配polyfill.io致IE11报Z.current.unMount is not iterable崩溃错误

冲突根因 #

该问题由polyfill.io默认注入的Symbol.iterator polyfill与React-hook-form 6.8.4及以上版本内部的迭代器调用逻辑不兼容导致。React-hook-form 6.8.4版本开始使用迭代器语法遍历内部unMount钩子数组，IE11环境下polyfill.io提供的Symbol.iterator实现存在缺陷，导致库内部判定unMount不是可迭代对象，抛出对应报错。

可行解决方案 #

• 方案一：降级React-hook-form版本
  直接将React-hook-form依赖版本锁定为6.8.3，该版本未引入迭代器遍历逻辑，不会触发兼容冲突，改造成本最低。
• 方案二：自定义polyfill加载规则
  不使用polyfill.io默认全量polyfill，仅指定业务实际需要的polyfill列表加载，排除Symbol.iterator相关polyfill；若业务必须使用Symbol相关能力，可替换为core-js提供的对应polyfill实现，兼容性更稳定。
• 方案三：修改第三方库遍历逻辑
  通过patch-package工具修改React-hook-form内部遍历unMount数组的逻辑，将原本的for of/解构迭代写法替换为普通forEach或下标for循环，完全不依赖迭代器能力，从根源避开兼容问题。
• 方案四：新增babel转译插件
  项目中引入babel-plugin-transform-for-of-as-array插件，打包时会自动将所有数组的for of遍历转译为原生for循环，无需修改业务代码或第三方库代码即可解决问题。

问题关联参考截图 #

• 未引入polyfill时正常运行
  
• 引入polyfill后报错状态
  

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