配置UploadThing时出现连接超时错误，请求技术支持

问题概述 #

在NextJS项目中配置UploadThing文件上传工具时，持续遭遇连接超时错误。控制台输出UND_ERR_CONNECT_TIMEOUT，浏览器端提示上传失败并伴随Response.text: Body has already been consumed的关联错误，已确认.env文件中的凭据配置正确。

相关代码 #

app/api/uploadthing/core.ts #

import { createUploadthing, type FileRouter } from "uploadthing/next";
import { auth } from "@clerk/nextjs";

const handleAuth = () => {
  const { userId } = auth();
  if (!userId) throw new Error("Unauthorized");
  return { userId };
};

const f = createUploadthing();

export type fileUploadEndpoints = "serverImage" | "messageFile";

export const ourFileRouter = {
  serverImage: f({ image: { maxFileSize: "4MB", maxFileCount: 1 } })
    .middleware(() => handleAuth())
    .onUploadComplete(() => {}),

  messageFile: f(["image", "pdf"])
    .middleware(() => handleAuth())
    .onUploadComplete(() => {}),
} satisfies FileRouter;

export type OurFileRouter = typeof ourFileRouter;

app/api/uploadthing/route.ts #

import { createNextRouteHandler } from "uploadthing/next";

import { ourFileRouter } from "./core";

// Export routes for Next App Router
export const { GET, POST } = createNextRouteHandler({
  router: ourFileRouter,
});

错误信息 #

NextJS控制台输出 #

[UT] UploadThing dev server is now running!
 ⨯ TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11600:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  cause: ConnectTimeoutError: Connect Timeout Error
      at onConnectTimeout (/home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:92227)
      at /home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:91719
      at Immediate._onImmediate (/home/sajawal/Documents/web_development/discord_clone_nextjs/node_modules/next/dist/compiled/undici/index.js:1:92109)
      at process.processImmediate (node:internal/timers:478:21)
      at process.callbackTrampoline (node:internal/async_hooks:130:17) {
    code: 'UND_ERR_CONNECT_TIMEOUT'
  }
}

浏览器端错误 #

Error: Something went wrong. Please report this to UploadThing.
    UploadThingError index.mjs:196
    fatalClientError chunk-WNRCOS53.mjs:104
    startUpload chunk-WNRCOS53.mjs:149
    current chunk-WNRCOS53.mjs:26
    onUploadClick index.mjs:245
    callCallback react-dom.development.js:19465
    ...
    NextJS 4
    <anonymous> index.js:6
    NextJS 4
    <anonymous> react-dom.development.js:27
    <anonymous> react-dom.development.js:36891
    NextJS 4
    <anonymous> index.js:37
    NextJS 4
    <anonymous> client.js:3
    NextJS 4
    <anonymous> app-index.js:14
    NextJS 4
    <anonymous> app-next-dev.js:9
    appBootstrap app-bootstrap.js:57
    loadScriptsInSequence app-bootstrap.js:23
    appBootstrap app-bootstrap.js:56
    <anonymous> app-next-dev.js:7
    NextJS 7
Caused by: TypeError: Response.text: Body has already been consumed.
    fromResponse index.mjs:218
    s3ConnectionRes client.mjs:119
    promise callback*DANGEROUS__uploadFiles client.mjs:117
    startUpload chunk-WNRCOS53.mjs:121
    current chunk-WNRCOS53.mjs:26
    onUploadClick index.mjs:245
    callCallback react-dom.development.js:19465
   ...

排查与解决方案 #

• 网络环境验证
  确认本地网络可正常访问UploadThing服务，可通过ping uploadthing.com或curl https://api.uploadthing.com测试连通性。若处于网络受限环境，需调整网络配置或使用代理。

• 二次确认.env配置
  检查UPLOADTHING_SECRET和UPLOADTHING_APP_ID变量名拼写是否正确，凭据值是否完整复制无多余空格/换行，且重启开发服务器使配置生效。

• 版本兼容性检查
  确保uploadthing/next版本与当前NextJS版本兼容，尝试更新依赖：

  npm update uploadthing
  # 或
  yarn upgrade uploadthing
  

• 调整请求超时设置
  在路由处理器中增加超时配置，修改route.ts：

  export const { GET, POST } = createNextRouteHandler({
    router: ourFileRouter,
    config: {
      fetchOptions: {
        timeout: 30000, // 设置为30秒超时
      },
    },
  });
  

• 排查自定义中间件冲突
  若项目存在middleware.ts，检查是否拦截了/api/uploadthing/*路径的请求，确保该路径被允许通过。

• 端口占用检查
  UploadThing开发服务器默认使用3001端口，检查该端口是否被其他程序占用，或指定其他端口启动：

  UPLOADTHING_DEV_PORT=3002 npm run dev
  

• 清理依赖缓存
  若以上步骤无效，尝试清理依赖后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

• 最小化项目测试
  创建一个仅包含UploadThing配置的空白NextJS项目，验证是否能正常运行，排除项目其他代码的干扰。

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