[bug]: Form component with Zod resolver Types of parameters value and value are incompatible.

nolafs commented 1 month ago

Describe the bug

I having the Type error on the <Form {...form} and FormField <FormField control={form.control}. The only way to get rid of the error is by add <Form {...form as any}.

const formSchema = z.object({
  isFree: z.boolean().default(false),
});

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      isFree: Boolean(initialData.isFree),
    },
  });

 <Form {...form}>

Current versions:

"@hookform/resolvers": "^3.9.0", "zod": "^3.23.8", "react-hook-form": "^7.52.2",

Affected component/components

Form

How to reproduce

No steps, the lint will flag this in IDE right away

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Webstorm
Mac

Before submitting

[X] I've made research efforts and searched the documentation
[X] I've searched for existing issues

nullnullsieben commented 1 month ago

Olaf Siebert @.***> schrieb am Di., 6. Aug. 2024, 09:43:

Describe the bug

I having the Type error on the <Form {...form} and FormField <FormField control={form.control}. The only way to get rid of the error is by add <Form {...form as any}.

const formSchema = z.object({ isFree: z.boolean().default(false), });

const form = useForm<z.infer>({ resolver: zodResolver(formSchema), defaultValues: { isFree: Boolean(initialData.isFree), }, });

<Form {...form}>

Current versions:

@.***/resolvers": "^3.9.0", "zod": "^3.23.8", "react-hook-form": "^7.52.2", Affected component/components

Form How to reproduce

No steps, the lint will flag this in IDE right away Codesandbox/StackBlitz link

No response Logs

No response System Info

Webstorm Mac

Before submitting

I've made research efforts and searched the documentation

I've searched for existing issues

— Reply to this email directly, view it on GitHub https://github.com/shadcn-ui/ui/issues/4514, or unsubscribe https://github.com/notifications/unsubscribe-auth/BIO77CJJBRA6IRZJHVGVAUTZQB5AXAVCNFSM6AAAAABMBXRJ7WVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2TAMJYGEZDSNI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

AtharvaJoshi16 commented 1 month ago

@nolafs Can you please provide additional code for the Form and Formfield tag? Based on the code you have provided, I have tried replicating the issue and it seems you have missed to pass name prop to Formfield.

Please refer below code:

const formSchema = z.object({
    isFree: z.boolean().default(false),
  })

  const initialData = {
    isFree: false,
  }

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      isFree: Boolean(initialData.isFree),
    },
  })
  return (
    <>      
    <Form {...form}>
        <FormField
          name="isFree"
          control={form.control}
          render={() => <Input />}
        />
      </Form>
    </>
  )

Before:

After:

nolafs commented 1 month ago

Thanks for getting back to me. No, prop name passed in. I go this issue was the forms in my project:

'use client';

import Link from 'next/link';
import { useRouter } from 'next/navigation';

import * as z from 'zod';
import axios from 'axios';
import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

import toast from 'react-hot-toast';

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Button,
  Input,
} from '@rocket-house-productions/shadcn-ui';

const formSchema = z.object({
  title: z.string().min(1, {
    message: 'Title is required',
  }),
});

const CreatePage = () => {
  const router = useRouter();

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      title: '',
    },
  });

  const { isSubmitting, isValid } = form.formState;

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    try {
      const response = await axios.post('/api/courses', values);
      router.push(`/courses/${response.data.id}`);
      toast.success('Course created');
    } catch (error) {
      toast.error('Something went wrong');
    }
  };

  return (
    <div className="mx-auto flex h-full max-w-5xl p-6 md:items-center md:justify-center">
      <div>
        <h1 className="text-2xl">Name your course</h1>
        <p className="text-sm text-slate-600">
          What would you like to name your course? Don&apos;t worry, you can change this later.
        </p>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="mt-8 space-y-8">
            <FormField
              control={form.control}
              name="title"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Course title</FormLabel>
                  <FormControl>
                    <Input disabled={isSubmitting} placeholder="ex. Advanced web developement" {...field} />
                  </FormControl>
                  <FormDescription>What will you teach in this course?</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex items-center gap-x-2">
              <Link href="/apps/kids-guitar-dojo/public">
                <Button type="button" variant="ghost">
                  Cancel
                </Button>
              </Link>
              <Button type="submit" disabled={!isValid || isSubmitting}>
                Continue
              </Button>
            </div>
          </form>
        </Form>
      </div>
    </div>
  );
};

export default CreatePage;

JudahZF commented 1 month ago

I am getting a similar issue after updating my depenencies:

Type error: Type '{ children: Element; watch: UseFormWatch<{ email: string; first_name: string; last_name: string; }>; getValues: UseFormGetValues<{ email: string; first_name: string; last_name: string; }>; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'UseFormReturn<{ email: string; first_name: string; last_name: string; }, any, { email: string; first_name: string; last_name: string; }>'.
  Types of property 'setValue' are incompatible.
    Type 'import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-hook-form/dist/types/form").UseFormSetValue<{ email: string; first_name: string; last_name: string; }>' is not assignable to type 'import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/form").UseFormSetValue<{ email: string; first_name: string; last_name: string; }>'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<Zod.baseObjectOutputType<{ first_name: Zod.ZodString; last_name: Zod.ZodString; email: Zod.ZodString; }>> ? R extends import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/path/eager").Path<...> ? import("/home/judahf/Projects/z...' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<Zod.baseObjectOutputType<{ first_name: Zod.ZodString; last_name: Zod.ZodString; email: Zod.ZodString; }>> ? R extends import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-hook-form/dist/types/path/eager").Path<...> ? import("/home/judahf...'.
          Type 'TFieldName extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? { ...; }[TFieldName] : TFieldName extends `${number}` ? never : never' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
            Type '{ email: string; first_name: string; last_name: string; }[TFieldName] | (TFieldName extends `${number}` ? never : never)' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
              Type '{ email: string; first_name: string; last_name: string; }[TFieldName]' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
                Type 'string' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
                  Type 'addQuestionMarks<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>, any>[TFieldName]' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
                    Type 'string' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends requiredKeys<...> ? { ...; }[TFieldName] : TFieldNa...'.
                      Type 'K extends requiredKeys<Zod.baseObjectOutputType<{ first_name: Zod.ZodString; last_name: Zod.ZodString; email: Zod.ZodString; }>> ? R extends import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/path/eager").Path<...> ? import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/p...' is not assignable to type 'K extends requiredKeys<Zod.baseObjectOutputType<{ first_name: Zod.ZodString; last_name: Zod.ZodString; email: Zod.ZodString; }>> ? R extends import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-hook-form/dist/types/path/eager").Path<...> ? import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-...'.
                        Type '(R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never) | (K extends `${number}` ? never : never)' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                          Type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                            Type 'PathValue<{ email: string; first_name: string; last_name: string; }[K], R>' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                              Type 'R extends `${infer K}.${infer R}` ? K extends keyof { email: string; first_name: string; last_name: string; }[K] ? R extends Path<{ email: string; first_name: string; last_name: string; }[K][K]> ? PathValue<...> : never : K extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? PathValue<...> : never : nev...' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                Type '(R extends keyof { email: string; first_name: string; last_name: string; }[K] ? { email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never) | (string extend...' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                  Type 'R extends keyof { email: string; first_name: string; last_name: string; }[K] ? { email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                    Type '{ email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] | (R extends `${number}` ? { email: string; first_name: string; last_name: string; }[K] extends readonly (infer V)[] ? V : never : never)' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                      Type '{ email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R]' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                        Type '{ email: string; first_name: string; last_name: string; }[K][string] | { email: string; first_name: string; last_name: string; }[K][string & { (separator: string | RegExp, limit?: number | undefined): string[]; (splitter: { ...; }, limit?: number | undefined): string[]; }] | ... 49 more ... | { ...; }[K][string & ((...' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                          Type '{ email: string; first_name: string; last_name: string; }[K][string]' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                            Type 'addQuestionMarks<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>, any>[K][string]' is not assignable to type 'K extends requiredKeys<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>> ? R extends Path<...> ? PathValue<...> : never : K extends `${number}` ? never : never'.
                                              Type 'R extends import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/path/eager").Path<{ email: string; first_name: string; last_name: string; }[K]> ? import("/home/judahf/Projects/zero/node_modules/react-hook-form/dist/types/path/eager").PathValue<...> : never' is not assignable to type 'R extends import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-hook-form/dist/types/path/eager").Path<{ email: string; first_name: string; last_name: string; }[K]> ? import("/home/judahf/Projects/zero/apps/cloud/node_modules/react-hook-form/dist/types/path/eager").PathValue<...> : never'.
                                                Type 'PathValue<{ email: string; first_name: string; last_name: string; }[K], R>' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                  Type 'R extends `${infer K}.${infer R}` ? K extends keyof { email: string; first_name: string; last_name: string; }[K] ? R extends Path<{ email: string; first_name: string; last_name: string; }[K][K]> ? PathValue<...> : never : K extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? PathValue<...> : never : nev...' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                    Type '(R extends keyof { email: string; first_name: string; last_name: string; }[K] ? { email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never) | (string extend...' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                      Type 'R extends keyof { email: string; first_name: string; last_name: string; }[K] ? { email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                        Type '{ email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R] | (R extends `${number}` ? { email: string; first_name: string; last_name: string; }[K] extends readonly (infer V)[] ? V : never : never)' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                          Type '{ email: string; first_name: string; last_name: string; }[K][keyof { email: string; first_name: string; last_name: string; }[K] & R]' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                            Type '{ email: string; first_name: string; last_name: string; }[K][string] | { email: string; first_name: string; last_name: string; }[K][string & { (separator: string | RegExp, limit?: number | undefined): string[]; (splitter: { ...; }, limit?: number | undefined): string[]; }] | ... 49 more ... | { ...; }[K][string & ((...' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                              Type '{ email: string; first_name: string; last_name: string; }[K][string]' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.
                                                                Type 'addQuestionMarks<baseObjectOutputType<{ first_name: ZodString; last_name: ZodString; email: ZodString; }>, any>[K][string]' is not assignable to type 'R extends Path<{ email: string; first_name: string; last_name: string; }[K]> ? PathValue<{ email: string; first_name: string; last_name: string; }[K], R> : never'.

  64 |  return (
  65 |      <Card>
> 66 |          <Form {...form}>
     |           ^
  67 |              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-0">
  68 |                  <CardHeader>
  69 |                      <CardTitle>Account</CardTitle>

shadcn-ui / ui