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

nolafs commented 4 months 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 4 months 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 4 months 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 4 months 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 3 months 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>

nvioli commented 2 months ago

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 commented 1 month ago

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

sdk1990 commented 4 weeks ago

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

ekpah commented 3 weeks ago

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 ?

shadcn-ui / ui