Type Error is showing on the resolver

[arslanalidev]

Hi I am facing this issue in my code. It's throwing me

./src/components/CheckoutForm.tsx:129:5
Type error: Type '<TFieldValues extends FieldValues, TContext>(values: UnpackNestedValue<TFieldValues>, context: TContext | undefined, options: ResolverOptions<TFieldValues>) => Promise<...>' is not assignable to type 'Resolver<TCheckOutForm, any>'.
  Types of parameters 'options' and 'options' are incompatible.
    Type 'ResolverOptions<TCheckOutForm>' is not assignable to type 'ResolverOptions<{ name: string; phoneNo: string; country: string; city: string; address: 
string; address2: string; products: Product[]; totalPrice: number; }>'.
      Type 'Product[]' is not assignable to type 'NestedValue<Product[]>'.
        Property '[$NestedValue]' is missing in type 'Product[]' but required in type '{ [$NestedValue]: never; }'.

  127 |       totalPrice: 740,
  128 |     },
> 129 |     resolver: yupResolver(schema),
      |     ^
  130 |   })
  131 | 
  132 |   const { fields, update, remove } = useFieldArray({
info  - Checking validity of types .npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! catalogi@ build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the catalogi@ build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

this is my code below.

const products = [
  {
    name: 'Stylish Black Dress',
    img: 'https://images.unsplash.com/photo-1550639525-c97d455acf70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=726&q=80',
    price: 100,
    qty: 2,
  },
  {
    name: 'Simple Black Dress',
    img: 'https://images.unsplash.com/photo-1550639525-c97d455acf70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=726&q=80',
    price: 50,
    qty: 2,
  },
  {
    name: 'Beautiful Black Dress',
    img: 'https://images.unsplash.com/photo-1550639525-c97d455acf70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=726&q=80',
    price: 120,
    qty: 2,
  },
  {
    name: 'Amazing Black Dress',
    img: 'https://images.unsplash.com/photo-1550639525-c97d455acf70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=726&q=80',
    price: 100,
    qty: 2,
  },
]

type Product = {
  name: string
  img: string
  price: number
  qty: number
}

type TCheckOutForm = {
  name: string
  phoneNo: string
  country: string
  city: string
  address: string
  address2: string
  products: NestedValue<Product[]>
  totalPrice: number
}

const schema = yup.object({
  name: yup.string().required().label('Name'),
  phoneNo: yup.string().required().label('Phone Number'),
  country: yup.string().required().label('Country'),
  city: yup.string().required().label('City'),
  address: yup.string().required().label('Address'),
  address2: yup.string().required().label('Address 2'),
  totalPrice: yup.number().positive().integer().required().label('Total Price'),
  products: yup
    .array()
    .of(
      yup.object().shape({
        name: yup.string(),
        img: yup.string(),
        price: yup.number(),
        qty: yup.number(),
      })
    )
    .label('Products'),
})

const CheckoutForm = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
    watch,
    setValue,
  } = useForm<TCheckOutForm>({
    defaultValues: {
      name: '',
      phoneNo: '',
      country: '',
      city: '',
      address: '',
      address2: '',
      products,
      totalPrice: 740,
    },
    resolver: yupResolver(schema),
  })

  const { fields, update, remove } = useFieldArray({
    control,
    name: 'products',
  })

const onSubmit: SubmitHandler<TCheckOutForm> = (data) => console.log(data)

[Moshyfawn]

It's the current TS limitation of RHF. See #7888 for some context.
It's being resolved in the next major V8 release of the lib. See #7433 for more info

[arslanalidev]

Now what solution you will suggest?

[Moshyfawn]

Using current RHF V7, there's no solution other than to mute your TS compiler via @ts-expect-error RHF V7 limitation #7895 and wait for the RHF V8 release

[Junnygram]

have you been able to find a suitable solution to the code