Type error with RemixFormProvider props

[jam-fran]

I'm trying to use RemixFormProvider to wrap my form, and am receiving a type error when attempting to pass the form methods to the provider. Here's a minimal reproduction, which is almost identical to the guidance in the docs:

import { zodResolver } from '@hookform/resolvers/zod'
import { RemixFormProvider, useRemixForm } from 'remix-hook-form'
import { z } from 'zod'

const formSchema = z.object({
  username: z.string().min(2).max(50),
})

const resolver = zodResolver(formSchema)

export const TestForm = () => {
  const methods = useRemixForm({
    resolver,
    defaultValues: {
      username: '',
    },
  })

  return (
    <RemixFormProvider {...methods}>
      <form onSubmit={methods.handleSubmit}>
        <input {...methods.register('username')} />
      </form>
    </RemixFormProvider>
  )
}

And here's the type error I'm getting on the Provider:

Type '{ children: Element; handleSubmit: (e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>; reset: (values?: { username: string; } | { ...; } | undefined) => void; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'RemixFormProviderProps<{ username: string; }>'.
  Types of property 'formState' are incompatible.
    Property 'disabled' is missing in type '{ dirtyFields: Partial<Readonly<{ username?: boolean | undefined; }>>; isDirty: boolean; isSubmitSuccessful: boolean; isSubmitted: boolean; isSubmitting: boolean; ... 5 more ...; errors: Partial<...>; }' but required in type 'FormState<{ username: string; }>'.ts(2322)
form.d.ts(89, 5): 'disabled' is declared here.

This seems similar to this recent issue (#42 ), but it's a slightly different error. Any help would be appreciated. Thank you!

[AlemTuzlak]

@jam-fran what version are you on?

[jam-fran]

@AlemTuzlak Here are my packages:

"@hookform/resolvers": "^3.3.2",
"@remix-run/node": "2.2.0",
"@remix-run/react": "2.2.0",
"@remix-run/serve": "2.2.0",
"react-hook-form": "^7.48.2",
"remix-hook-form": "^3.0.4",
"zod": "^3.22.4"

[jam-fran]

@AlemTuzlak Seems to be related to a feature released ("disable prop for useForm") in v 7.48.0 of react-hook-form: https://github.com/react-hook-form/react-hook-form/releases/tag/v7.48.0

Downgrading to v 7.47.0 fixed the error for me.

[AlemTuzlak]

Interesting, in theory this shouldn't happen because I extend their type to type the hook, they might have changed it to something, I will investigate this, thank you!

[jam-fran]

Thank you, Alem!

On Thu, Nov 9, 2023 at 9:49 AM Alem Tuzlak @.***> wrote:

Interesting, in theory this shouldn't happen because I extend their type to type the hook, they might have changed it to something, I will investigate this, thank you!

— Reply to this email directly, view it on GitHub https://github.com/Code-Forge-Net/remix-hook-form/issues/49#issuecomment-1804087012, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJO7HLASNYCI3DXG2ACVARTYDT3SNAVCNFSM6AAAAAA7EXCL7GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQMBUGA4DOMBRGI . You are receiving this because you were mentioned.Message ID: @.***>

[willian]

I am having the same issue. And when I downgraded to 7.47.0 as suggested by @jam-fran the error changed. I am using shadcn's Form component, which relies on react-hook-form. This is the error after downgrading to 7.47.0:

 │      Type '{ children: Element; handleSubmit: (e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>; reset: (values?: { full_name: string; ... 14 more ...; accept_communication?: boolean | undefined; } | { ...; } | undefined) => void; ... 12 more ...; setFocus: UseFormSetFocus<...>; }' is not assignable to type 'UseFormReturn<{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; }, any, undefined>'. typescript (2322) [64, 8]
 │        Types of property 'reset' are incompatible. 
 │          Type '(values?: { full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; ... 9 more ...; accept_communication?: boolean | undefined; } | { ...; } | undefined) => void' is not assignable to type 'UseFormReset<{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; }>'. 
 │            Types of parameters 'values' and 'values' are incompatible. 
 │              Type '{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; } | { ...; } | ResetAction<...> | undefined' is not assignable to type '{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; } | { ...; } | undefined'. 
 │                Type 'ResetAction<{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; }>' is not assignable to type '{ full_name: string; email: string; cpf: string; birthday: string; mobile_number: string; marital_status: "single" | "married" | "divorced" | "widowed" | "stable-union" | "other"; sex: "female" | "male"; ... 8 more ...; accept_communication?: boolean | undefined; } | { ...; } | undefined'. 

[piotrkulpinski]

I can confirm the issue with the latest package versions:

[AlemTuzlak]

Fixed with 3.1!