[bug]: FormMessage with useTranslations from next-intl

[anilmenawat]

Describe the bug

When passing a translation key to FormMessage like: <FormMessage>{t(key)}</FormMessage> it displays the key and not the appropriate translation. Replacing it with <span>{t(key)}</span> works just fine.

Affected component/components

Form

How to reproduce

1. Build a standard nextjs project with create-next-app
2. Create any form using shadcn ui Form component with FormMessage as shown above
3. Add a translation table
4. Enter an invalid email address in the form
5. It will show the key instead of the translation
6. Replace FormMessage with span and it will work fine.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

"next": "14.1.4",
"next-intl": "^3.9.5",
"react": "^18.2.0",
"zod": "^3.22.4”,
"@hookform/resolvers": "^3.3.4",

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Seryjnyy]

FormMessage displays either an error message or it's children. Since you're using zod you should put the translation in the schema definition and leave as is.

You might have to get the translation in a Server component first, and then pass it to the component with the form and define the schema there.

That's what I found, at least.

[0-don]

const FormMessage = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
  const { error, formMessageId } = useFormField()
  const body = error ? String(error?.message) : children

its wrong it displays error before children, must be the other way around