Broken Validation when using React Elements for Messages

[dairyisscary]

Version Number

7.43.2

Codesandbox/Expo snack

n/a

Steps to reproduce

hello react-hook-form folks!

28cafa864b4a92b2d2f6ac8f5c5cb27722e38b3f removed the option to use react elements as validation messages. as a result internationalization libraries that use elements for translation of validation messages no longer work.

For example, with react-intl/formatjs:

<input type="text" {...form.register("name", { required: <FormattedMessage defaultMessage="this is required" /> })} />

most internationalization libraries (including formatjs) can produce strings but the element api is often more convenient, can use constant values, and doesn't require boilerplate to get things out of context

Expected behaviour

hopefully we can bring this back.

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

[bluebill1049]

We actually only support string from the very beginning of V7, but the code was left there for awhile. Now that react hook form core is going to be framework agnostic, any react-specific code will need to be removed. Consider returning the string and using translation API if you can. eg

{ required: translate(test') }

// or 

{ required: 'test' }
translate(errors.test.message)

[dairyisscary]

hey bill! thanks for getting back to me.

can i convince you otherwise with any of these arguments?

• how would I include html in a message? what if Iwanted this is <em>required</em>? strings cannot support this, can they?
• I understand the idea of being framework agnostic but what if a framework doesn't use strings at all. I'm not sure this is the case today but solid js for example uses real DOM nodes, not vdom, so perhaps they might be using DOM textNodes, not strings. What if you just made isMessage part of the framework adapter instead of the core, since what a message can and cannot be is framework specific.

[bluebill1049]

I understand this is not going to work the best for you, and certainly answering your questions will only probably bubble up more. I am trying my best to answer here with a clear mind after a whole day of work. Yes, we can consider option two, but to be mindful, this is by design to only support string so users don't have to type assert. The typescript never supports React.ReactNode in the type definition and is included in the doc. It wouldn't be my priority to fix it out probably after the library core is published and officially used by hook form.

[dairyisscary]

of course, bill! i hope i'm not being overwhelming haha (i know open source can be burnout-city).

i'll close the issue and migrate all my messages to strings :)

[bluebill1049]

@dairyisscary let me work on this later, I am moving to the core. Once the core is ready, I will try to get this working. There are a few challenges because I can't just check its function or want to bring react as a dependency, but will try to find a workaround if you have any suggestions or solutions let me know as well.

[lennerd]

Hey @bluebill1049 any news on this? This is a blocker for us when updating to the latest react-hook-form version.

We currently sometimes use async validations to load data from the server, for example to test for duplicates. When there is a duplicate we add a link to the other entity right inside the error message. This was super easy to do when returing JSX, but will be quite difficult via a simple string.

Any suggestions to solve this with react-hook-form version 7?

[lennerd]

@bluebill1049 any news on this? Thanks in advance!

[lennerd]

@bluebill1049 we would like to update react-hook-form but are currently blocked by this bug. Any future plans or suggestions?

It's also fine for us if you think that this feature will not be reimplemented into react-hook-form. In this case we will need to look for refactorings in our code base to reenable this future with newer versions.

[lennerd]

@bluebill1049 any news? Like I said, a simple: "will not reimplement feature" is fine for us to be able to plan our next steps.

[rh-meowsa]

We have multiple scenarios where we embed an anchor styled CTA button in the error message. Not sure why "react"-hook-form should be agnostic of react.