React使用joi-browser做表单验证时报Cannot read 'string' of undefined错误

问题原因 #

你遇到的报错是因为Joi对象导入错误，实际拿到的值为undefined，因此调用Joi.string()时触发了属性读取异常。

解决步骤 #

• 第一步修改导入语句：将代码第3行的import { Joi } from "joi-browser";替换为import Joi from "joi-browser";

  joi-browser 采用默认导出规则，不支持命名导出的写法，加花括号导入时拿到的就是undefined，去掉花括号即可获取到正确的Joi实例。

• 若修改导入后仍报错，检查项目是否已正确安装依赖，执行安装命令：

  npm i joi-browser
  # 或使用yarn
  yarn add joi-browser
  

• 补充说明：joi-browser目前已停止维护，若后续出现其他兼容问题，可替换为维护更活跃的校验库如Zod，或使用@hapi/joi的浏览器适配版本。

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