formData & TypeScript erros in next v15.0.0-canary.179

[tender locust]

Bellow, the code of my invoices UI buttons in charge to interact with the form used to delete invocies on the DB.

import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { deleteInvoice } from '@/app/lib/actions';
// ...

export function DeleteInvoice({ id }: { id: string }) {
  const deleteInvoiceWithId = deleteInvoice.bind(null, id);

  return (
    <>
      <form action={deleteInvoiceWithId}>
      <button className="...">
       ...
      </form>
    </>
  );
}

Bellow, the code of app/lib/actions.ts

import { revalidatePath } from 'next/cache';

export async function deleteInvoice(id: string): Promise<{ message: string }> {
    try {
        await sql`DELETE FROM invoices WHERE id = ${id}`;
        revalidatePath('/dashboard/invoices');
        return { message: 'Deleted Invoice.' };
    } catch (error) {
        return { message: 'Database Error: Failed to Delete Invoice.' };
    }
  }
```

When I create the productuion optimizaed build `pnpm run build`, I got the following TypeScript error: 

```
./app/ui/invoices/buttons.tsx:32:13
Type error: Type '() => Promise<{ message: string; }>' is not assignable to type 'string | ((formData: FormData) => void | Promise<void>) | undefined'.
  Type '() => Promise<{ message: string; }>' is not assignable to type '(formData: FormData) => void | Promise<void>'.
    Type 'Promise<{ message: string; }>' is not assignable to type 'void | Promise<void>'.
      Type 'Promise<{ message: string; }>' is not assignable to type 'Promise<void>'.
        Type '{ message: string; }' is not assignable to type 'void'.
```

What's wrong? 
Thx for your help

[gray bough]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[rough pulsar]

import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
import Link from 'next/link';
import { deleteInvoice } from '@/app/lib/actions';
// ...

export function DeleteInvoice({ id }: { id: string }) {
  return (
    <>
      <form onSubmit={(e)=> {
        e.preventDefault()
        deleteInvoice(id)
      }}>
      <button className="...">
       ...
      </form>
    </>
  );
}```

try this

[tender locust]

I got the following error (at run time this time):

Error: Event handlers cannot be passed to Client Component props.
<form onSubmit={function onSubmit} children=...>
^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
at stringify (<anonymous>)
at stringify (<anonymous>)

[rough pulsar]

make your deleteInvoice component a client component

[tender locust]

It's works, thx for your help.

I miss to add use client at the top of the components file

[rough pulsar]

mark solution

[tender locust]

Bellow, summary's solution:

1. Update source code with the following code:

import Link from 'next/link';
import { deleteInvoice } from '@/app/lib/actions';
// ...

export function DeleteInvoice({ id }: { id: string }) {
  return (
    <>
      <form onSubmit={(e)=> {
        e.preventDefault()
        deleteInvoice(id)
      }}>
      <button className="...">
       ...
      </form>
    </>
  );
}

2. Add use client on top of the component file