Integration with zod-i18n?

[DHFW]

Already implemented remix-i18next in my project for static texts. I use zod for form data validations (with Remix validated form).
I would like to know how I can integrate the zod-i18n package for localized validation errors.

Any hints or ways to point me in the right direction?

I tried code like this:
In my loader

const t = await i18nNext.getFixedT(request);
z.setErrorMap(makeZodI18nMap({ t, ns: ['custom', 'zod'] }));

But it does nothing.

Also tried in the component:

export default function ProfilePage() {
  const { t } = useTranslation();
  z.setErrorMap(makeZodI18nMap({ t, handlePath: { ns: ['common'] } }));
  return (
    ... form and inputs
  )
}

[DHFW]

I think I made the solution myself :)

In my i18n.ts configuration file I changed the defaultNS to an array like so:

  defaultNS: ['common', 'zod'],

In my root.tsx:

// in imports: 
import { makeZodI18nMap } from 'zod-i18n-map';

// In the app/ main component:
export default function App() {
  const { t, i18n } = useTranslation();
  z.setErrorMap(makeZodI18nMap({ t, handlePath: { ns: ['zod'] } }));

And then the messages are translated to the file in my public folder where the common.json is also placed.
The content of the zod.json is copied from the zod-i18n locales/de/zod.json file

[lgastler]

Great, that helped me a ton.

One thing I had to do additionally to get it working was to update the handle export in my root.tsx to include the "zod" namespace like this

export const handle = {
-  i18n: ["common"],
+  i18n: ["common", "zod"],
};