skip to Main Content

Whenever, I try to update the data on Vercel, this is the error that it shows:

invalid input syntax for type uuid: "undefined" - unable to save

However, it successfully updates the data when done locally.

This is how I submit the form:

  <form onSubmit={onSubmit} className="p-8 text-gray-600 w-full bg-white rounded-lg shadow-md">
          <input type="hidden" value={water_types.id} name="id"/>
         //inputs

          //button
        </form>

Submit function:

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
        event.preventDefault();
        try { 
            const formData = new FormData(event.currentTarget);
            const res = await editFunction(formData);

            
        } catch (err) {
            console.error(err, "error");
            if (err instanceof Error) {
                setMessage(err.message);
            } else {
                setMessage("An error occurred");
            }
        }
    }

And the server action:

export async function editFunction(formData: FormData): Promise<{ message: string }> {    
    const cookieStore = cookies()
    const supabase = createServerActionClient({ cookies: () => cookieStore })
    const {data: {user}} = await supabase.auth.getUser();

    try{    
      const name = formData.get('name')
      const price = formData.get('price')
      const idValue = formData.get('id');

      console.log(formData, "formData") //data shows correctly on the console
  
        const {data, error} = await supabase.from('db')
            .update({
                name, price
            }).eq('id', idValue)

          console.log(data, "data")
          console.log(error, "error")
        
        if(error){
            return {message: `${error.message}  - unable to save`}
        } 
        return { message: `Succesfully added the data` }
    }catch(e){
        return {message: "Failed to submit the form."}
    }

}

It seems that when deployed on Vercel it does not recognize the input type hidden, however, I am also using this in another module and the update just works fine.

enter image description here

create table
  public.db (
    id uuid not null default uuid_generate_v4 (),
    name text not null,
    price numeric(10, 2) not null,
    user_id uuid not null,
    constraint db_pkey primary key (id),
    constraint db_user_id_fkey foreign key (user_id) references profiles (id)
  ) tablespace pg_default;

2

Answers


  1. The error message tells you that you wanted to assign a value to UUID, but, instead of passing a valid value, you pass "undefined", which cannot be converted into UUID. Since value is water_types.id and it turns out to be "undefined", you end up having this error.

    You mentioned that this does not happen for you at localhost, but it happens on Vercel. This strongly implies that there is a difference between your local setup and Vercel setup. Look at configurations and unversioned files in order to spot the difference.

    Login or Signup to reply.
  2. If you are using server actions, should you not be using the ‘action’ attribute on the element, instead of the ‘onSubmit’ attribute?

    Regarding the uuid, I would recommend a guard clause that checks the id type, for example:

      if (!formData.get('id')) {
        throw new Error('id is required')
      }
    

    Or better still, a tool like zod to check the formData matches the correct schema before sending to the database.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search