createInvoice and updateInvoice should maybe have Promise<State> as return type

[nemchik]

I just worked through chapter 14 https://nextjs.org/learn/dashboard-app/improving-accessibility and took note that TypeScript complains when using useFormState because the action functions (createInvoice and updateInvoice) differ in type from the initialState being passed. I've got my project deployed on Vercel (per the instructions in chapter 6 https://nextjs.org/learn/dashboard-app/setting-up-your-database also see P.S. note on this chapter) and the build log outputs:

[16:39:50.854] Failed to compile.
[16:39:50.855] 
[16:39:50.855] ./app/ui/invoices/create-form.tsx:17:29
[16:39:50.855] Type error: No overload matches this call.
[16:39:50.856]   Overload 1 of 2, '(action: (state: { errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; } | { message: string; errors?: undefined; }) => { errors: { ...; }; message: string; } | { ...; } | Promise<...>, initialState: { ...; } | { ...; }, permalink?: string | undefined): [state: ...]', gave the following error.
[16:39:50.856]     Argument of type '(prevState: State, formData: FormData) => Promise<{ errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; } | { ...; }>' is not assignable to parameter of type '(state: { errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; } | { message: string; errors?: undefined; }) => { errors: { ...; }; message: string; } | { ...; } | Promise<...>'.
[16:39:50.856]       Target signature provides too few arguments. Expected 2 or more, but got 1.
[16:39:50.856]   Overload 2 of 2, '(action: (state: { errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; } | { message: string; errors?: undefined; }, payload: FormData) => { ...; } | ... 1 more ... | Promise<...>, initialState: { ...; } | { ...; }, permalink?: string | undefined): [state: ...]', gave the following error.
[16:39:50.857]     Argument of type '{ message: null; errors: {}; }' is not assignable to parameter of type '{ errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; } | { message: string; errors?: undefined; }'.
[16:39:50.858]       Type '{ message: null; errors: {}; }' is not assignable to type '{ errors: { customerId?: string[] | undefined; amount?: string[] | undefined; status?: string[] | undefined; }; message: string; }'.
[16:39:50.858]         Types of property 'message' are incompatible.
[16:39:50.858]           Type 'null' is not assignable to type 'string'.
[16:39:50.858] 
[16:39:50.858] �[0m �[90m 15 |�[39m �[36mexport�[39m �[36mdefault�[39m �[36mfunction�[39m �[33mForm�[39m({ customers }�[33m:�[39m { customers�[33m:�[39m �[33mCustomerField�[39m[] }) {�[0m
[16:39:50.858] �[0m �[90m 16 |�[39m   �[36mconst�[39m initialState �[33m=�[39m { message�[33m:�[39m �[36mnull�[39m�[33m,�[39m errors�[33m:�[39m {} }�[33m;�[39m�[0m
[16:39:50.858] �[0m�[31m�[1m>�[22m�[39m�[90m 17 |�[39m   �[36mconst�[39m [state�[33m,�[39m dispatch] �[33m=�[39m useFormState(createInvoice�[33m,�[39m initialState)�[33m;�[39m�[0m
[16:39:50.858] �[0m �[90m    |�[39m                             �[31m�[1m^�[22m�[39m�[0m
[16:39:50.858] �[0m �[90m 18 |�[39m�[0m
[16:39:50.858] �[0m �[90m 19 |�[39m   �[36mreturn�[39m (�[0m
[16:39:50.858] �[0m �[90m 20 |�[39m     �[33m<�[39m�[33mform�[39m action�[33m=�[39m{dispatch}�[33m>�[39m�[0m
[16:39:50.932] Error: Command "npm run build" exited with 1
[16:39:51.223] 

(sorry for all the special characters representing colors, it's copied directly from the output)

I found that seemingly the cleanest way to resolve this is to add Promise<State> as the return type of the functions createInvoice and updateInvoice in app/lib/actions.ts

export async function createInvoice(
  prevState: State,
  formData: FormData
): Promise<State> {

export async function updateInvoice(
  id: string,
  prevState: State,
  formData: FormData
): Promise<State> {

I'm still learning quite a bit, and this might not be the best solution, but it does seem to resolve the errors. My initial instinct as to why this might be wrong is both of those functions end with

  revalidatePath("/dashboard/invoices");
  redirect("/dashboard/invoices");

Neither of those lines imply a return of State as far as I can tell, so maybe more information could be provided to clarify what's going on here. I know the Promise part is because the functions are async so they can await the sql calls.

---

P.S. per the instructions in chapter 6 when deploying from GitHub to Vercel I receive errors about the missing alt attributes that are later added in chapter 14. I figured it would be easy to add on my own but I looked ahead in the material to see it was covered in a later chapter and waited patiently, but there was no indication in chapter 6 that this was expected. This topic could warrant a separate issue, and the outcome could either be to cover the alt attribute requirement sooner so that the Vercel deploy can be successful, or somehow otherwise keep that code commented until it's time to cover accessibility in chapter 14, or at least add some notes in chapter 6 about the deploy failing until you reach chapter 14 to correct the alt attributes (although that is quite a few chapters to cover between 6 and 14).

[nemchik]

My P.S. note may be resolved by #468
I had not considered leaving the alt attributes blank, but that pretty much covers it.

[o-ja]

@nemchik, I ran into same issue but the issue actually was that I didn't fully change the createInvoice. In sql try/catch block the earlier version returns string when error but it should return { message: 'Database Error: Failed to Create Invoice.'} instead of just 'Database Error: Failed to Create Invoice.'

Summary, no need to add any return types but fix the try/catch to return what it should return in the new implementation.

Copy paste the code-block from https://nextjs.org/learn/dashboard-app/improving-accessibility without any changes and type errors should be gone. Also same code below:

export async function createInvoice(prevState: State, formData: FormData) {
  // Validate form using Zod
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status')
  });

  // If form validation fails, return errors early. Otherwise, continue.
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.'
    };
  }

  // Prepare data for insertion into the database
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  // Insert data into the database
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    // If a database error occurs, return a more specific error.
    return {
      message: 'Database Error: Failed to Create Invoice.'
    };
  }

  // Revalidate the cache for the invoices page and redirect the user.
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

[nemchik]

@nemchik, I ran into same issue but the issue actually was that I didn't fully change the createInvoice. In sql try/catch block the earlier version returns string when error but it should return { message: 'Database Error: Failed to Create Invoice.'} instead of just 'Database Error: Failed to Create Invoice.'

Summary, no need to add any return types but fix the try/catch to return what it should return in the new implementation.

Copy paste the code-block from https://nextjs.org/learn/dashboard-app/improving-accessibility without any changes and type errors should be gone. Also same code below:

export async function createInvoice(prevState: State, formData: FormData) {
  // Validate form using Zod
  const validatedFields = CreateInvoice.safeParse({
    customerId: formData.get('customerId'),
    amount: formData.get('amount'),
    status: formData.get('status')
  });

  // If form validation fails, return errors early. Otherwise, continue.
  if (!validatedFields.success) {
    return {
      errors: validatedFields.error.flatten().fieldErrors,
      message: 'Missing Fields. Failed to Create Invoice.'
    };
  }

  // Prepare data for insertion into the database
  const { customerId, amount, status } = validatedFields.data;
  const amountInCents = amount * 100;
  const date = new Date().toISOString().split('T')[0];

  // Insert data into the database
  try {
    await sql`
      INSERT INTO invoices (customer_id, amount, status, date)
      VALUES (${customerId}, ${amountInCents}, ${status}, ${date})
    `;
  } catch (error) {
    // If a database error occurs, return a more specific error.
    return {
      message: 'Database Error: Failed to Create Invoice.'
    };
  }

  // Revalidate the cache for the invoices page and redirect the user.
  revalidatePath('/dashboard/invoices');
  redirect('/dashboard/invoices');
}

The only difference between the code you posted there and what i am suggesting is

export async function createInvoice(prevState: State, formData: FormData) {

vs

export async function createInvoice(
  prevState: State,
  formData: FormData,
): Promise<State> {

When removing the return type on the function I get an error in app/ui/invoices/create-form.tsx on line 17

next-learn/dashboard/final-example/app/ui/invoices/create-form.tsx

Line 17 in e75f714

const [state, dispatch] = useFormState(createInvoice, initialState);

The tooltip in the screenshot scrolls, but the contents are essentially what I posted in my original message. this is also the same output I get when running npm run build.

[CesarQD98]

Got the same problem when I reached chapter 14. At first I tried your solution but didn't work. When I checked the integrity of my app/ui/invoices/create-form.tsx file, I found that I had a typo like the following:

create-form.tsx with typo ❌

// imports ...

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState = { mesasage: null, error: {} } // <- ** Typo here! Should be "errors", not "error" **
  const [state, dispatch] = useFormState(createInvoice, initialState)

  return (
    <form action={dispatch}>...</form>
  )

create-form.tsx fixed ✅

// imports ...

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState = { mesasage: null, errors: {} } // <- ** Typo fixed **

// ...

This fixed the type error that you showed, the same I had. No need to add types into either createInvoice or updateInvoice from app/lib/actions.ts.

[nemchik]

Got the same problem when I reached chapter 14. At first I tried your solution but didn't work. When I checked the integrity of my app/ui/invoices/create-form.tsx file, I found that I had a typo like the following:

create-form.tsx with typo ❌

// imports ...

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState = { mesasage: null, error: {} } // <- ** Typo here! Should be "errors", not "error" **
  const [state, dispatch] = useFormState(createInvoice, initialState)

  return (
    <form action={dispatch}>...</form>
  )

create-form.tsx fixed ✅

// imports ...

export default function Form({ customers }: { customers: CustomerField[] }) {
  const initialState = { mesasage: null, errors: {} } // <- ** Typo fixed **

// ...

This fixed the type error that you showed, the same I had. No need to add types into either createInvoice or updateInvoice from app/lib/actions.ts.

I do not have this spelling error. I tested again today removing the type (: Promise<State>) and it continues to cause the error I posted above.

[Marini83]

What's the fix?

[nemchik]

It appears there has not yet been a fix.

[paulreedaus]

Yeah im getting the same issue. Error is solely around the useFormState in the edit-form.tsx. It doesn't throw a runtime error. The Create Invoice button does nothing and there are no Aria warnings for amount or status in the invoice. Although the Customer Name warning works ok.

[paulreedaus]

Actually to fix my problem I just found I was missing an import statement at the top of the code.

import { useFormState } from 'react-dom';

[nemchik]

I'm not missing the import, still have the issue.

[stabla]

Update: I am in the same situation. Compile correctly but the error is there.

[brenoos]

Hello.
I am not following this course but I am having exactly the same issue in a personal project.
Any fixes found?

[brenoos]

Ok, I found a solution for my case, not sure if it's the same that you guys were seeing.

After revalidatePath I needed a return setting errors and message.

  revalidatePath('/home/sessions/add');

  return { errors: {}, messages: 'User created' };

or using a redirect.

  revalidatePath('/home/sessions/add');

  redirect("/home")

If you have a try catch block for your data mutation, you need the return in both cases, inside the try block and inside the catch block