issue: Type 'FieldError' is not assignable to type 'string' - type checking error in 7.33.0

[igordanchenko]

Version Number

7.33.0

Codesandbox/Expo snack

https://codesandbox.io/s/dreamy-mountain-6my95x?file=/src/TextField.tsx

Steps to reproduce

1. Go to https://codesandbox.io/s/dreamy-mountain-6my95x?file=/src/TextField.tsx
2. Observe the following TS error at line 35:

<TextFieldError error={errors[name]?.message} />

TS2322: Type 'string | FieldError | Merge<FieldError, FieldErrors> | undefined' is not assignable to type 'string | undefined'.
Type 'FieldError' is not assignable to type 'string'.

3. Downgrade react-hook-form to 7.32.2
4. Observe there is no TypeScript error

Alternatively, you can reproduce this error in CRA 5 TypeScript project by copying App.tsx and TextField.tsx from the above sandbox.

I ran into this issue while updating my project to the latest version of react-hook-form, and I was able to pinpoint this issue to version 7.33.0 (7.32.2 type-checks just fine). The above sandbox is an over-simplified standalone demo of this error. In this demo I intentionally extracted TextFieldError into a separate component to force the type checking on errors[name]?.message (this way, I'm mimicking a real-life scenario I'm facing in my project).

Expected behaviour

No TypeScript errors as in v7.32.2

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

[leapful]

@igordanchenko

This is not a bug. The newer version of react-hook-form has been updated with an enhancement on type definition for "errors", before that, "message" field is falling back to "any" type. You just need to update TexFieldError with correct type definition.

Working demo: https://codesandbox.io/s/react-hook-form-8914-forked-foorwp?file=/src/TextField.tsx

[igordanchenko]

@leapful, thank you for the proposed solution. It does work in the CodeSandbox, however the same code errors out in CRA app.

TS2322: Type 'string | FieldError | Merge<FieldError, FieldErrorsImpl>' is not assignable to type 'ReactNode'.
Type 'FieldError' is not assignable to type 'ReactNode'.
Type 'FieldError' is missing the following properties from type 'ReactPortal': key, children, props

However, changing

{error}

to

{`${error}`}

solves this issue.

Am I reading the type definitions correctly that errors[name]?.message can be an object of FieldError shape? I'm not a react-hook-form expert, but I thought that errors[name]?.message should represent an actual error message (a string).

And overall, I have 2 concerns with this solution:

1. It forces to pull in quite a lot of implementation details into the app layer, which makes the app very much dependent on minor react-hook-form version changes.

{ error }: { error?: 
    | string
    | FieldError
    | Merge<FieldError, FieldErrorsImpl<any>>
    | undefined;
}

This code is almost guaranteed to break the next time a small change is introduced with a minor release. In fact, this code works in 7.34.2 but breaks in 7.33.0

2. Overall, it feels like poor DX.

[leapful]

@igordanchenko : You're using TextField as a generic component without providing any context about form values to "useFormContext", that's why "errors[name].message" cannot be determined and fallback to all possible supported types.

Just put form values for your case (which is a string) to make it work.

https://codesandbox.io/s/react-hook-form-8914-forked-cuh5l2?file=/src/TextField.tsx

[igordanchenko]

Yes, that works! Thank you!

Upon further investigation, I realized that I was incorrect in using the errors[name]?.message in a generic input component. For instance, this approach just doesn't work for nested inputs (i.e. user.email). So instead of extracting error messages with lodash get (as recommended here), I opted to switch to the Controller component. The Controller provides convenient access to the error object and helps keep TS code neat.

render={({ fieldState: { error } }) => (
  // error={error?.message}
)}

Here is the code I ended up with at the moment - https://codesandbox.io/s/react-hook-form-8914-1-bozvu9?file=/src/TextField.tsx

Thanks again for your help.

[JasonTheAdams]

@leapful What would you recommend doing for a dynamic form where all the fields are dynamically generated? It's not possible to provide a list of types to the form or form context.

[leapful]

@JasonTheAdams

It depends on what kind of dynamic you are using.

Usually, dynamic fields always follows a pattern, like the field name can be any name but then its type is fixed (string, number, date ...). If you want a strictly typed and avoid mistake on development, I would recommend to implement a generator based on dynamic schema pattern. The result of generator will be like TextField,TextError, NumberField, NumberError, DateField, DateError ... that are related to the schema pattern.

Otherwise, just use the simple approach like the codesandbox sample in this discussion on using just generic type to handle.

For example:

useFormContext<{ [x: string]: string }>();

// then get error based on its field value type
<TextFieldError error={string} />