nextjs runtime_error ai_generated true

Error: Server Action failed to parse FormData: unexpected end of data

ID: nextjs/server-action-formdata-parse-fail

Also available as: JSON · Markdown · 中文
82%Fix Rate
85%Confidence
1Evidence
2024-06-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —
[email protected] active — — —

Root Cause

The FormData sent to a Server Action is incomplete or malformed, often due to a client-side fetch or form submission that truncates the body before sending.

generic

中文

发送到服务器操作的 FormData 不完整或格式错误，通常是由于客户端 fetch 或表单提交在发送前截断了请求体。

Official Documentation

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#formdata

Workarounds

  1. 85% success Ensure the client-side form submission uses the native FormData API correctly. For fetch, avoid manually setting headers: `const formData = new FormData(); formData.append('field', value); await fetch('/api/action', { method: 'POST', body: formData });` 
    Ensure the client-side form submission uses the native FormData API correctly. For fetch, avoid manually setting headers: `const formData = new FormData(); formData.append('field', value); await fetch('/api/action', { method: 'POST', body: formData });`
  2. 75% success Validate the FormData before sending by logging or checking entries: `for (let [key, value] of formData.entries()) { console.log(key, value); }` to confirm all fields are present. 
    Validate the FormData before sending by logging or checking entries: `for (let [key, value] of formData.entries()) { console.log(key, value); }` to confirm all fields are present.
  3. 80% success If using a custom fetch, ensure no premature stream closing. Use `await fetch(url, { method: 'POST', body: formData })` without wrapping in JSON.stringify. 
    If using a custom fetch, ensure no premature stream closing. Use `await fetch(url, { method: 'POST', body: formData })` without wrapping in JSON.stringify.

中文步骤

  1. 确保客户端表单提交正确使用原生 FormData API。对于 fetch，避免手动设置头部：`const formData = new FormData(); formData.append('field', value); await fetch('/api/action', { method: 'POST', body: formData });`
  2. 在发送前验证 FormData，通过日志或检查条目：`for (let [key, value] of formData.entries()) { console.log(key, value); }` 确认所有字段都存在。
  3. 如果使用自定义 fetch，确保没有过早关闭流。使用 `await fetch(url, { method: 'POST', body: formData })`，不要用 JSON.stringify 包裹。

Dead Ends

Common approaches that don't work:

  1. Adding 'Content-Type: multipart/form-data' header manually in fetch calls 70% fail

    The browser automatically sets the correct Content-Type with boundary for FormData; manually setting it can break parsing.

  2. Increasing server body parser size limit in next.config.js 50% fail

    The error is not about size limits but about incomplete data transmission, often due to client-side logic errors.

  3. Switching to JSON.stringify instead of FormData for the request body 60% fail

    Server Actions expect FormData for 'use server' functions; sending JSON requires different handling and may cause type mismatches.