nextjs runtime_error ai_generated true

Error: Server Action failed. FormData is undefined or empty.

ID: nextjs/server-action-formdata-undefined

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

Version Compatibility

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

Root Cause

Server Action's FormData is undefined because the form was submitted without an event handler or the action prop is missing on the form element.

generic

中文

服务器操作的 FormData 未定义，因为表单提交时没有事件处理程序，或者表单元素上缺少 action 属性。

Official Documentation

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

Workarounds

  1. 95% success Ensure the form has an action prop pointing to the Server Action function, and the action is defined in a separate file or with 'use server' at the top of the action function. 
    Ensure the form has an action prop pointing to the Server Action function, and the action is defined in a separate file or with 'use server' at the top of the action function.
  2. 80% success Use the experimental useActionState hook with a client component to handle the form submission manually if the form must be a client component. 
    Use the experimental useActionState hook with a client component to handle the form submission manually if the form must be a client component.

中文步骤

  1. Ensure the form has an action prop pointing to the Server Action function, and the action is defined in a separate file or with 'use server' at the top of the action function.
  2. Use the experimental useActionState hook with a client component to handle the form submission manually if the form must be a client component.

Dead Ends

Common approaches that don't work:

  1. 60% fail

    'use server' should be on the Server Action function, not the component file. This causes the form to not recognize the action as a server action.

  2. 80% fail

    Server Actions require the form action attribute to properly bind FormData. onClick bypasses this and sends undefined.

  3. 70% fail

    Server Actions cannot be called directly from client components without 'use server' on the action function. This leads to undefined FormData.