Zod Schema在浏览器与Node.js中表现不一致问题排查

问题重现 #

定义的Zod Schema：

const fullIdZodSchema = z.object({
  id: z.string(),
  version: z.string().optional(),
  source: z.string(),
});

执行的解析代码：

const data = [{ id: 'aaa', source: 'aaa' }];
const result = z.array(IdZodSchema).safeParse(data);

if (!result.success) {
  console.error(result.error);
} else {
  console.info('Zod parse passed.');
}

现象：Node.js环境解析通过，浏览器端报错，错误信息（已翻译）：

core.mjs:6563 ERROR ZodError: [
{
"code": "invalid_type",
"expected": "string",
"received": "undefined",
"path": [
0,
"version"
],
"message": "必填项"
}
]

可能原因 #

1. Zod版本不一致：浏览器端和Node.js端安装的Zod版本不同，旧版本Zod对optional()的处理存在差异，或部分版本在浏览器环境有兼容性问题。
2. Schema变量不匹配：代码中使用的IdZodSchema和定义的fullIdZodSchema并非同一变量，浏览器端的IdZodSchema可能是另一个未将version设为可选的Schema。
3. 浏览器缓存问题：浏览器加载了旧版本代码，其中version字段被定义为必填而非可选。

解决方案 #

• 统一两端Zod版本：检查package.json中的Zod版本号，确保浏览器端和Node.js端使用完全相同的版本，重新安装依赖后清理浏览器缓存。
• 校验Schema变量：确认代码中使用的IdZodSchema确实指向fullIdZodSchema，避免变量名拼写错误或重复定义。
• 强制刷新浏览器：使用Ctrl+F5强制刷新页面，清除缓存，确保加载最新的代码文件。

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