Next.js Discord

Discord Forum

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

Unanswered
Canada Warbler posted this in #help-forum
Open in Discord
Canada WarblerOP
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 sqlDELETE 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 buildpnpm 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

8 Replies

@Canada Warbler 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
Double-striped Thick-knee
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
Canada WarblerOP
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>)
Canada WarblerOP
It's works, thx for your help.

I miss to add use client at the top of the components file
Canada WarblerOP
Bellow, summary's solution:

1. Update source code with the following code: 

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>
    </>
  );
}
2. Adduse client` on top of the component file
Done