React项目Yup自定义校验热更新正常F5刷新后报错问题

自定义Yup校验规则热更新正常、F5刷新报错的核心原因是：自定义校验方法的注册逻辑没有在应用初始化阶段提前执行。
热更新属于模块局部替换，执行时序刚好让注册逻辑先跑完，所以方法能正常挂载调用；但F5触发全量页面重载时，如果定义校验schema的业务文件加载顺序早于注册函数的执行，yup.string原型上还没挂载primeraLetraMayuscula方法，调用时就会直接抛出「xxx is not a function」类型的错误。

• 在React应用的入口文件（通常是main.tsx/index.tsx，即挂载React根节点的文件）的最顶部引入校验配置函数并立即执行，确保自定义规则在所有业务组件、校验schema加载前就完成注册：

// 注意：这两行要放在所有业务组件、App组件的引入语句之前
import configurarValidaciones from './你的Validations文件路径'
configurarValidaciones()

// 后续再写ReactDOM.createRoot(...).render(<App />) 这类根节点挂载逻辑

• 不要把configurarValidaciones()的调用放在组件内部、路由回调、异步加载逻辑这类延迟执行的位置，必须保证注册逻辑的执行时机早于所有调用自定义校验方法的代码。

如果完成上述配置后仍有报错，可以做两项检查：

1. 确认使用的Yup版本为v1及以上，当前写的Global.d.ts类型扩展逻辑和v1版本的模块规范兼容，类型声明可以正常生效
2. 不要在项目多个文件中重复调用addMethod注册同名自定义校验，避免方法覆盖引发异常

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