Next 14 - useFormState Type error: No overload matches this call.

[jona-es]

Summary

Hi community.
I got an issue with one of my pages in next.js 14 (latest) with app router, especially with my formAction.
I understood, that right now I need to use useFormState intead of useActionState. Ok so far. So I have a page with the following code (shrinked) which works perfectly well in run dev but when I try to run build I get an erro message like this:

Type error: No overload matches this call.
  Overload 1 of 2, '(action: (state: void) => void | Promise<void>, initialState: void, permalink?: string | undefined): [state: void, dispatch: () => void, isPending: boolean]', gave the following error.
    Argument of type '(prevState: { message: string; }, formData: FormData) => Promise<void>' is not assignable to parameter of type '(state: void) => void | Promise<void>'.
      Target signature provides too few arguments. Expected 2 or more, but got 1.
  Overload 2 of 2, '(action: (state: void, payload: FormData) => void | Promise<void>, initialState: void, permalink?: string | undefined): [state: void, dispatch: (payload: FormData) => void, isPending: boolean]', gave the following error.
    Argument of type '(prevState: { message: string; }, formData: FormData) => Promise<void>' is not assignable to parameter of type '(state: void, payload: FormData) => void | Promise<void>'.
      Types of parameters 'prevState' and 'state' are incompatible.
        Type 'void' is not assignable to type '{ message: string; }'.

My page consists of three parts: the server page, the client page and the action:
page.tsx:

export default async function ClientPage(...) {
    
    return <Client />;
}

The ClientPage.tsx:

'use client';

import { FormEvent, useState } from 'react';
import { Button, Form } from 'react-bootstrap';
i
import { useFormState } from 'react-dom';
import { useActionState } from "react";
import { sendVals } from "@/app/myPage/actions";



const initialState = {
  message: '',
};



export default function ClientPage() {

  // const [state, formAction] = useActionState(sendVals, initialState);
  const [state, formAction] = useFormState(sendVals, initialState);

  const [isChecked, setIsChecked] = useState(false);


  return (
    <>        
            <Form action={formAction} >
...
               <Form.Check type='checkbox' name='checkBox' onChange={(e) => onCheckboxChange(e.target.checked)} />
...
              <Button type="submit" >Press me</Button>
            </Form>
    </>
  );
}

and my actinons.ts:

"use server";
...
export async function sendVals(
    prevState: {
        message: string;
    },
    formData: FormData,
) {
...
 console.log(`Server says hello: ${formData.get('checkBox')}`);
}

I don't get it. It works in dev, and obviously there is a method that can be called, but when I try to build it -> crash
Any help highly appreciated.

Additional information

No response

Example

No response

[mutasim77]

The problem is that your sendVals function doesn't quite match what useFormState expects. I can see your sendVals function doesn't have a return statement and only uses console.log. That's likely causing the build error. Try adding a return statement that matches your initial state:

"use server";

export async function sendVals(
    prevState: { message: string },
    formData: FormData
): Promise<{ message: string }> {
    console.log(`Server says hello: ${formData.get('checkBox')}`);
    // Do your stuff here
    return { message: "Form submitted" }; // or some relevant message
}

[jona-es]

Thanks a lot @mutasim77 you saved my day. It seems to be a simple answer, but sometimes you get blinded by the code :D