How to use functions like 'register' as paramter for other components?

[Zerebokep]

After upgrading from 7.44.3 @hookform/resolvers 3.1.0 to 3.1.1 typescript complains about incompatible types.

I usually defined "register" as a prop like this:

register: UseFormRegister<FieldValues>

But after the upgrade I receive a "is not assignable to type" error.

Type 'UseFormRegister<{ username: string; password: string; email: string; } & { captcha: string; }>' is not assignable to type 'UseFormRegister<FieldValues>'.
  Type 'FieldValues' is not assignable to type '{ username: string; password: string; email: string; } & { captcha: string; }'.ts(2322)

same if I use setError as prop:

Type 'UseFormSetError<{ username: string; password: string; email: string; } & { captcha: string; }>' is not assignable to type 'UseFormSetError<FieldValues>'.
  Types of parameters 'name' and 'name' are incompatible.
    Type 'string' is not assignable to type '"username" | "password" | "email" | "captcha" | `root.${string}` | "root"'.ts(2322)

[Zerebokep]

It seems the react-hook-form update doesn't caused this issue, I've nailed it down to the @hookform/resolvers 3.1.0 to 3.1.1 update.

[Moshyfawn]

Can you modify this codesandbox to reproduce the issue you're describing? From your OG post it's clear what your setup is.

[Zerebokep]

I've tried to reproduce the error, but it shows me a different one once I've added a merged schema: https://codesandbox.io/p/sandbox/boring-yalow-38c832?file=/src/App.tsx:48,5

Please note that I've changed zod to yup.

[Moshyfawn]

You can pass the inferred type as the useForm generic to negate this issue as a work around.

type FieldValues = yup.InferType<typeof mergedSchema>;

useForm<FieldValues>()

The resolver inferred type is different for some reason and I'll need to look into why

[Zerebokep]

Weird, that is what I initial tried locally, it seems to fix the issue in the linked sandbox, but not in my project. I'll investigate that further.

[Moshyfawn]

Fair enough. Sorry, I can't propose a solution to an issue I can't reproduce 🤪

[Zerebokep]

bump

[oppositeart]

I had a similar problem with Type 'string' is not assignable to type '"username" | "password" | "email" | "captcha" | 'root.${string}' | "root"'.ts(2322) when I tried to use setError("fieldName", {type:"error", message: "my error"});.

It happened when I used async values in useForm setup.

const formMethods = useForm({
		mode: "onChange",
		reValidateMode: "onChange",
		defaultValues: {},
		shouldFocusError: false,
		values: asyncValues,
});

It was solved by adding type definition.

const formMethods = useForm<{[key: string]: any}>({
		mode: "onChange",
		reValidateMode: "onChange",
		defaultValues: {},
		shouldFocusError: false,
		values: asyncValues,
});