issue: Type generics do not work well with TS Unions

[keithrz]

Version Number

7.51.1

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/loving-golick-swltg4

Steps to reproduce

1. Go to 'App.tsx' in the code sandbox
2. Hover your mouse over the TypeScript error for "control"
3. You should see the following TS error:

Type 'Control<FormValues<Product>>' is not assignable to type 'Control<FormValues<Product | Discount>>'.
  Types of property 'register' are incompatible.
    Type 'UseFormRegister<FormValues<Product>>' is not assignable to type 'UseFormRegister<FormValues<Product | Discount>>'.
      Type 'FormValues<Product | Discount>' is not assignable to type 'FormValues<Product>'.typescript(2322)
InternalField.tsx(14, 3): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & { control: Control<FormValues<Product | Discount>>; trigger: UseFormTrigger<FormValues<Product | Discount>>; }'
(property) control: Control<FormValues<Product | Discount>>

Expected behaviour

No TS error, because Product is part of the TS Union Product | Discount

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[paynecodes]

I'm seeing this issue as well on [email protected]. Thank you for reporting.

Reverting 7.50.1 works for now.

[keithrz]

Thanks for the response! I am not seeing the error go away after bumping my local version down to 7.50.1

This prompted me to check the version I have in the code sandbox, and the version there is actually 7.4.1, so as far as I can tell, it looks like this issue was introduced awhile ago.

I forked the sandbox and updated the version to the latest (7.51.5), and the issue still occurs. Changing the sandbox to version 7.50.1 does not change behavior, either

[joaopedrodcf]

I was on "react-hook-form": "7.51.4" without errors and after upgrading to "react-hook-form": "7.51.5" the typing errors started appearing 👍