Next.js部署Vercel遇ReferenceError: File is not defined问题求助

问题背景 #

部署Next.js项目到Vercel时，出现ReferenceError: File is not defined错误，错误随机出现在不同的API路由中。尝试升级Node.js/Next.js、调整Zod Schema导入方式、检查Prisma调用、排查TRPC影响等方案均无效，移除api/caption/route.ts中导入的generateCaption函数后，错误消失，怀疑问题与该函数内的Zod Parse调用相关。

代码问题分析 #

结合提供的代码，问题根源主要有以下几点：

1. 未定义的CaptionType变量
   在lib/utils.ts的generateCaption函数中，直接使用了CaptionType但未定义该变量。虽然表面报错是File is not defined，但这个未定义变量会触发运行时异常，可能导致后续依赖加载或代码执行出现连锁问题，最终表现为不固定的路由报错。

2. Edge Runtime 兼容性冲突
   Next.js App Router的API路由默认使用Edge Runtime，而File是浏览器环境专属API，Node.js/Edge Runtime中不存在。如果generateCaption函数或其依赖（如Zod的某些版本、LangChain模块）在执行过程中间接触发了对File对象的访问，就会抛出ReferenceError。Vercel部署时的路由打包顺序差异，导致错误路由不固定。

3. 冗余的Zod验证
   API路由中已经通过postPublicationSchema.parse(data)完成了数据验证，generateCaption中又重复执行了一次Parse操作，不仅冗余，还增加了触发兼容性问题的概率。

修复方案 #

1. 补充CaptionType变量定义 #

在lib/utils.ts中添加CaptionType的具体定义，示例如下：

// 根据业务需求调整选项结构
const CaptionType = [
  { value: { header: "示例标题", description: "示例描述" }, label: "示例标签" },
  // 其他类型选项
];

export function generateCaption(data: any): string {
  const validInputs = postPublicationSchema.parse(data);
  const property = CaptionType.find((op) => op.value === validInputs)?.label;
  return `
  ${validInputs.header} .....
  `;
}

2. 切换到Node.js Runtime #

如果依赖库（如LangChain的某些模块）不兼容Edge Runtime，可在API路由文件顶部添加配置，强制使用Node.js Runtime：

export const runtime = "nodejs"; // 放在文件最顶部

import { NextRequest, NextResponse } from "next/server";
// 其他导入和代码...

3. 移除冗余的Zod验证 #

利用API入口已验证过的validInputs，避免重复Parse：

• 修改api/caption/route.ts中的调用：

  // 原代码：const inputEmbedding = formattedText(generateCaption(data))
  const inputEmbedding = formattedText(generateCaption(validInputs));
  

• 修改lib/utils.ts的generateCaption函数：

  import { postPublicationSchema } from "./schemas/publication";
  import { z } from "zod";
  import { format } from 'date-fns';
  
  const CaptionType = [/* 定义内容 */];
  
  // 使用z.infer获取已验证的类型，避免any
  export function generateCaption(data: z.infer<typeof postPublicationSchema>): string {
    // 无需再次parse，直接使用已验证的数据
    const property = CaptionType.find((op) => op.value === data)?.label;
    return `
    ${data.header} .....
    `;
  }
  

4. 校验依赖版本兼容性 #

确保Zod、LangChain、date-fns等依赖与当前Next.js版本（尤其是Edge Runtime）兼容，必要时升级或降级到稳定版本。

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