React项目使用useForm在IE11出现SCRIPT438 contains/repeat报错如何解决

解决方案 #

1. 调整polyfill引入顺序 #

你当前的polyfill引入顺序有误，core-js/stable 需要放在所有特性polyfill的最前面，同时补全contains方法的兼容补丁，修正后的入口文件开头导入顺序如下：

import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import "core-js/stable";
import "core-js/features/string/repeat";
import "core-js/features/element/contains";
import "proxy-polyfill/proxy.min.js";

SCRIPT438: Object doesn't support property or method 'contains' 报错的原因是IE11没有实现覆盖全节点类型的contains方法，新增对应polyfill即可解决该问题。

2. 修复单选按钮重复注册问题 #

你猜测的重复ID相关问题方向正确，本质是react-hook-form的register方法不能重复调用绑定同一个字段名给多个组件。三个单选按钮属于同一组，仅需要给整个组绑定一次register即可，不需要每个RadioButton都传入register属性。
正确用法如下：

• 同一组的所有RadioButton保留相同的name属性（你当前设置的name="chooseInsurance"符合要求）
• 仅在其中一个按钮上绑定register，或者将register返回的属性拆分后分别给三个按钮传递对应的name、onChange、onBlur即可，不要每个按钮都解构一次register("chooseInsurance")，重复调用会导致react-hook-form内部产生重复的节点绑定逻辑，在IE11的低兼容环境下触发原生方法调用异常。

3. 补充IE11兼容配置 #

如果你的项目是通过create-react-app搭建的，还需要修改package.json中的browserslist配置，确保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"
  ]
}

修改完成后删除node_modules/.cache文件夹，重新启动项目即可生效。

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