Vercel部署Next.js应用遇ReferenceError: File is not defined错误求助

可能的原因及解决步骤 #

1. 检查tRPC相关依赖版本 #

• 确认tRPC、@trpc/server、@trpc/next等依赖是否存在服务端环境兼容问题，部分旧版本插件可能隐式依赖浏览器的File API。
• 尝试将tRPC相关包升级到最新稳定版，或回退至之前能正常部署的版本。

2. 排查隐式依赖的代码 #

• 虽然route.ts未直接引用File，但tRPC路由逻辑（如resolver、schema定义）可能间接引入了使用File的模块：
  • 若用Zod做校验，检查是否存在z.instanceof(File)这类浏览器端规则，且未在服务端做条件判断。
  • 检查上传相关逻辑，确认服务端resolver中是否误用到浏览器File对象，而非Node.js的fs等文件处理模块。
• 可通过命令搜索项目中所有含File的文件定位问题：

  grep -r "File" ./src --include="*.ts" --include="*.tsx"
  

3. 验证Node.js运行时版本 #

• File在Node.js 18.11.0及以上才成为全局可用API。检查Vercel项目配置：
  • 在Vercel控制台项目设置中，确认「Node.js Version」设为18.x或更高。
  • 也可在package.json中添加engines字段指定版本：

    {
      "engines": {
        "node": ">=18.11.0"
      }
    }
    

4. 检查Next.js编译配置 #

• 确认next.config.js无错误配置导致服务端代码被编译为浏览器端代码：
  • 若启用output: 'export'静态导出模式，服务端路由无法运行，可能引发异常。
  • 检查experimental.appDir配置是否与tRPC版本兼容，早期App Router版本和tRPC存在适配问题。

5. 本地复现问题 #

• 执行next build && next start模拟生产环境，访问API路由看是否复现错误。
• 若本地能复现，用node --inspect调试工具定位编译后代码中File的来源。

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