nextJS API route.ts stuck on await request.formData()

[ishaangandhi]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/condescending-haze-6f3k9w

To Reproduce

Upload a multipart form data and wait on it. This works locally, but when you deploy it to Vercel, it just hangs. If you switch to JSON instead of multipart form data, it works fine. So its not an issue of the bytes taking too long in flight.

Current vs. Expected behavior

I expected the await request.formData() to take as long as a similarly sized request.json(), but it regularly times out.

Provide environment information

Downloading registry.npmjs.org/next/14.1.4: 20.77 MB/20.77 MB, done
Downloading registry.npmjs.org/@next/swc-darwin-x64/14.1.4: 35.35 MB/35.35 MB, done
Progress: resolved 28, reused 16, downloaded 4, added 20, done

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:45:49 PST 2024; root:xnu-10063.101.15~2/RELEASE_ARM64_T6020
Binaries:
  Node: 21.6.2
  npm: 10.2.4
  Yarn: N/A
  pnpm: 8.12.1
Relevant Packages:
  next: 14.1.4
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

No response

[ishaangandhi]

Found someone else with the same issue on SO: https://stackoverflow.com/questions/78149924/nextjs-api-route-ts-stuck-on-await-request-formdata

[mertthesamael]

Well, it's not a solid "solution" for it and I don't know that if it fits in your project but maybe you may want to try Server Actions to interact with FormData

Edit: This is just how i handle it 🙏

[ishaangandhi]

That's pretty cool @mertthesamael. I'll definitely use that the next time I make a form.

[antoinedelplace]

I have the same problem. Any solution yet ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[ishaangandhi]

I have the same problem. Any solution yet ?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

I'd recommend changing to Server actions.

[PaulSinghDev]

Just adding some context here as I have experienced the same issue. These are my findings so far:

1. The function works fine in the Vercel prod env
2. The function works fine when run locally
3. The function works fine when I use a vite test to send the request (locally)
4. The function falls down when I try to run the aforementioned test in a GitHub Action Workflow
5. The function falls down when I try to locally run the aforementioned test in a GitHub Action Workflow via act

The workflow is using ubuntu-latest as the machine it is run on so I am starting to think there is a nuance with the operating system which is causing the issue.

I checked the linked SO question but it seems to lean toward the issue being the file's size. I do not believe this to be the case as I am passing a file which is tiny (16bytes) and am generating it like this:

new File(
      [new Blob(["0x00", "0x01", "0x02", "0x03"], { type: "image/png" })],
      "test.png",
      { type: "image/png" }
    )

The weird thing is, when I run the test locally (not within the GH action) the files size pre request is 16 bytes but, when it hits the server, logging file.size returns 0.

I understand the notion to use server actions but that would require ripping out a lot of what has been written already for a large CRUD app so would be nice to have this resolved.