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

nolafs · 2024-08-06T07:42:26Z

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

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

The text was updated successfully, but these errors were encountered:

nullnullsieben · 2024-08-06T11:39:01Z

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<typeof formSchema>>({ 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 <#4514>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BIO77CJJBRA6IRZJHVGVAUTZQB5AXAVCNFSM6AAAAABMBXRJ7WVHI2DSMVQWIX3LMV43ASLTON2WKOZSGQ2TAMJYGEZDSNI> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

AtharvaJoshi16 · 2024-08-06T14:38:47Z

@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 · 2024-08-06T14:47:20Z

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 · 2024-08-08T10:34:55Z

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>

nvioli · 2024-09-19T17:47:11Z

This just started happening to me today. It only happens when npm linking the source of the Form component.

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

import { z } from 'zod';
import { zodResolver } from '@hookform/resolvers/zod';
import {
  BasicTextField,
  Button,
  Form,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  ModalClose,
  ModalFooter,
  useFormField,
} from '@wpmedia/ads-core';
import { useForm } from 'react-hook-form';

export default () => {
const formSchema = z.object({
      title: z.string().min(3).max(500),
      description: z.string().optional(),
    });

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

    const onSubmit = async (values: z.infer<typeof formSchema>) => {
      console.log('submitting', values);
    };

    return (
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
          <FormField
            control={form.control}
            name="title"
            render={({ field }) => (
              <FormItem>
                <FormLabel required requiredI18nText="Required">
                  Title
                </FormLabel>
                <BasicTextField
                  {...field}
                  hasError={!!form.formState.errors.title}
                />
                <FormDescription>
                  Enter the title here.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="description"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Description</FormLabel>
                <BasicTextField {...field} />
                <FormMessage />
              </FormItem>
            )}
          />
          <FormField
            control={form.control}
            name="tags"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Tags</FormLabel>
                <BasicTextField {...field} />
                <FormMessage />
              </FormItem>
            )}
          />
          <Button variant="primary">Submit</Button>
        </form>
      </Form>
    );}

Type '{ children: Element; watch: UseFormWatch<{ title: string; description?: string | undefined; }>; getValues: UseFormGetValues<{ title: string; description?: string | undefined; }>; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'UseFormReturn<{ title: string; description?: string | undefined; }, any, { title: string; description?: string | undefined; }>'.
  Types of property 'setValue' are incompatible.
    Type 'import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/form").UseFormSetValue<{ title: string; description?: string | undefined; }>' is not assignable to type 'import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-form@7.53.0_react@18.2.0/node_modules/react-hook-form/dist/types/form").UseFormSetValue<{ title: string; description?: string | undefined; }>'.
      Types of parameters 'value' and 'value' are incompatible.
        Type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-form@7.53.0_react@18.2.0/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violi...' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violin/wapo/arc-dam-audio-center-ui/node_mo...'.
          Type 'TFieldName extends "title" | "description" ? { title: string; description?: string | undefined; }[TFieldName] : TFieldName extends `${number}` ? never : never' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
            Type '{ title: string; description?: string | undefined; }[TFieldName] | (TFieldName extends `${number}` ? never : never)' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
              Type '{ title: string; description?: string | undefined; }[TFieldName]' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
                Type 'string | undefined' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
                  Type 'undefined' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
                    Type 'addQuestionMarks<baseObjectOutputType<{ title: ZodString; description: ZodOptional<ZodString>; }>, any>[TFieldName] | undefined' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
                      Type 'undefined' is not assignable to type 'TFieldName extends `${infer K}.${infer R}` ? K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<...> : never : K extends `${number}` ? never : never : TFieldName extends "title" | "description" ? { ...; }[TFieldName] : TFieldName extends `${number}...'.
                        Type 'K extends "title" | "description" ? R extends import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-form@7.53.0_react@18.2.0/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-f...' is not assignable to type 'K extends "title" | "description" ? R extends import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/path/eager")...'.
                          Type '(R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never) | (K extends `${number}` ? never : never)' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                            Type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                              Type 'PathValue<{ title: string; description?: string | undefined; }[K], R>' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                Type 'R extends `${infer K}.${infer R}` ? K extends keyof { title: string; description?: string | undefined; }[K] ? R extends Path<{ title: string; description?: string | undefined; }[K][K]> ? PathValue<...> : never : K extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? PathValue<...> : never : never : R ext...' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                  Type '(R extends keyof { title: string; description?: string | undefined; }[K] ? { title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never) | (string extends keyof { ...; ...' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                    Type 'R extends keyof { title: string; description?: string | undefined; }[K] ? { title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                      Type '{ title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] | (R extends `${number}` ? { title: string; description?: string | undefined; }[K] extends readonly (infer V)[] ? V : never : never)' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                        Type '{ title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R]' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                          Type '{ title: string; description?: string | undefined; }[K][string] | { title: string; description?: string | undefined; }[K][string & (() => string)] | { title: string; description?: string | undefined; }[K][string & ((pos: number) => string)] | ... 43 more ... | { ...; }[K][string & (() => IterableIterator<...>)]' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                            Type '{ title: string; description?: string | undefined; }[K][string]' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                              Type 'unknown' is not assignable to type 'K extends "title" | "description" ? R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never : K extends `${number}` ? never : never'.
                                                Type 'R extends import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-form@7.53.0_react@18.2.0/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violin/wapo/arc-ui/node_modules/.pnpm/react-hook-form@7.53.0_react@18.2.0/node_modules...' is not assignable to type 'R extends import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/path/eager").Path<{ title: string; description?: string | undefined; }[K]> ? import("/Users/violin/wapo/arc-dam-audio-center-ui/node_modules/react-hook-form/dist/types/path/eager").PathValue<...> : never'.
                                                  Type 'PathValue<{ title: string; description?: string | undefined; }[K], R>' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                    Type 'R extends `${infer K}.${infer R}` ? K extends keyof { title: string; description?: string | undefined; }[K] ? R extends Path<{ title: string; description?: string | undefined; }[K][K]> ? PathValue<...> : never : K extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? PathValue<...> : never : never : R ext...' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                      Type '(R extends keyof { title: string; description?: string | undefined; }[K] ? { title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never) | (string extends keyof { ...; ...' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                        Type 'R extends keyof { title: string; description?: string | undefined; }[K] ? { title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] : R extends `${number}` ? { ...; }[K] extends readonly (infer V)[] ? V : never : never' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                          Type '{ title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R] | (R extends `${number}` ? { title: string; description?: string | undefined; }[K] extends readonly (infer V)[] ? V : never : never)' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                            Type '{ title: string; description?: string | undefined; }[K][keyof { title: string; description?: string | undefined; }[K] & R]' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                              Type '{ title: string; description?: string | undefined; }[K][string] | { title: string; description?: string | undefined; }[K][string & (() => string)] | { title: string; description?: string | undefined; }[K][string & ((pos: number) => string)] | ... 43 more ... | { ...; }[K][string & (() => IterableIterator<...>)]' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                                Type '{ title: string; description?: string | undefined; }[K][string]' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.
                                                                  Type 'unknown' is not assignable to type 'R extends Path<{ title: string; description?: string | undefined; }[K]> ? PathValue<{ title: string; description?: string | undefined; }[K], R> : never'.ts(2322)

codesapling · 2024-10-28T09:08:47Z

I do have the exact same issue. Did someone find any solution/workaround ?

sdk1990 · 2024-11-06T08:57:44Z

+1. Hoping to find a solution/workaround here.

ekpah · 2024-11-12T10:32:55Z

This issue happened to me as well, when importing the form component from a different package and separately importing "useForm" like so:

import { useForm } from "react-hook-form"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@[differentPackage]/components/ui/form"

When I changed the shadcn-component to also import -> export "useForm", the type error was gone. I assume this might be some incompatibility with differen "react-hook-form"-installations in different package.json ?

rvndaputra · 2024-12-06T09:14:04Z

any updates on this? i encountered this issue when importing the <Form/> component from shadcn. it's also happens when i'm passing the form.control

<Form {...form}>
  <form className="flex flex-col" onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      control={form.control}
      name="email"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <Input autoComplete="email" placeholder="you@example.com" {...field} />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
</Form>

heruiwoniou · 2024-12-12T08:55:43Z

This is caused by different versions of react. The unified version of react, react-DOM,@type/ react.@type/react-DOM in package.json can solve this problem

nolafs added the bug Something isn't working label Aug 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nolafs commented Aug 6, 2024

nullnullsieben commented Aug 6, 2024 via email

AtharvaJoshi16 commented Aug 6, 2024

nolafs commented Aug 6, 2024 •

edited

Loading

JudahZF commented Aug 8, 2024

nvioli commented Sep 19, 2024

codesapling commented Oct 28, 2024

sdk1990 commented Nov 6, 2024

ekpah commented Nov 12, 2024

rvndaputra commented Dec 6, 2024

heruiwoniou commented Dec 12, 2024

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

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

Comments

nolafs commented Aug 6, 2024

Describe the bug

Affected component/components

How to reproduce

Codesandbox/StackBlitz link

Logs

System Info

Before submitting

nullnullsieben commented Aug 6, 2024 via email

AtharvaJoshi16 commented Aug 6, 2024

nolafs commented Aug 6, 2024 • edited Loading

JudahZF commented Aug 8, 2024

nvioli commented Sep 19, 2024

codesapling commented Oct 28, 2024

sdk1990 commented Nov 6, 2024

ekpah commented Nov 12, 2024

rvndaputra commented Dec 6, 2024

heruiwoniou commented Dec 12, 2024

nolafs commented Aug 6, 2024 •

edited

Loading