Next.js Discord

Discord Forum

Event handler on a client component is causing an error; maybe related to async functions

Answered
Satin Angora posted this in #help-forum
Open in Discord
Satin AngoraOP
I have a form element,
<form
    ...
    onSubmit={handleSubmit}
    method="post"
  >...
where handleSubmit is an potentially async method with definition:
async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    "use server" // I am not sure about converting this to a server action
    event.preventDefault()
    
    const formData = new FormData(event.currentTarget/*.target*/)
    if (isSubmitAsync) await onSubmit(formData)
    else onSubmit(formData)
    ...
  }
The onSubmit is a prop of parent component with the signature
onSubmit: (formData: FormData) => Promise<void> | void
There is some use cases where onSubmit isn't async, and to prevent any unexpected behaviour arising from awaiting a non-Promise value, I came up with this.

The error I get isn't clear about the origin or the reason of it
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
  <... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
                                               ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
null
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON      
- error Error: Event handlers cannot be passed to Client Component props.
  <... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
                                               ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
digest: "3042938249"
null
Also I'm not sure if the last two lines are part of the same errors. (cont. below)
Answered by Satin Angora
I think the issue was either, I was using server actions inside a client component, or, passed down event handler's type was potentially a Promise (it's return type was Promise<void> | void). Now it works.
View full answer

5 Replies

Satin AngoraOP
(Continuation of the issue mentioned above^)
I'm getting the error two times, and, for this route, I have three components using this component. This makes me think async event handlers are the issue. Here is related components with arguments passed down:
async function submitContactRequest(formData: FormData) {
    ...get data from formData and create instance of related model...
    openSubmitProcessDialog()
    await createRequest(
      unrecordedContactReq,
      kContactRequestConverter
    )
    closeSubmitProcessDialog()
  }


  return <RequestForm
        ...
        onSubmit={submitContactRequest}
All three components pass down a similiar event handler to the RequestForm component.
What may be the issue?
Satin AngoraOP
I think the issue was either, I was using server actions inside a client component, or, passed down event handler's type was potentially a Promise (it's return type was Promise<void> | void). Now it works.
Answer