Messages from zod input validation doesnt work with react compiler. NextJS.

[krystianmolas]

Hi,
I'm encountering an issue with displaying validation messages in a basic input form using Zod for validation, as documented here: https://ui.shadcn.com/docs/components/input. This setup worked in previous projects, but in my current project, which utilizes the experimental React compiler, the validation messages fail to appear. When I disable the React compiler by commenting out the following configuration:

experimental: { reactCompiler: true, }

the validation messages display correctly. Has anyone experienced a similar issue, or could this be a bug related to the experimental React compiler?

[zerosym]

I believe this has to do with the usage of formState from useFormContext below (in the ui/form.tsx file):

ui/apps/www/registry/new-york/ui/form.tsx

Lines 47 to 49 in 259a9ff

	const { getFieldState, formState } = useFormContext()
	const fieldState = getFieldState(fieldContext.name, formState)

If formState is referentially stable between renders memoization will prevent fieldState from updating here.

The solution I'm currently using is to swap both those lines with:

 // import useController along with the rest of the hook-form imports
 const { fieldState } = useController({ name: fieldContext.name })

I don't know how ideal this is compared to whatever fix will end up being merged, but it seems to work for me. As an escape hatch for any other potential issues there is also 'use no memo'.

[OreQr]

Thanks it works for me too.

Full code:

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