Yup doesn't work properly with i18n - reactjs

Question

I have this piece of a code. I want to add error messages depending on user's locale, but yup throws errors, same if fields are filled in incorrectly
[missing "en.login.emailRequiredError" translation]
[missing "en.login.passRequiredError" translation]
const schema = yup.object().shape({
email: yup
.string()
.email(i18n.t('login.emailSpellError'))
.required(i18n.t('login.emailRequiredError')),
password: yup
.string()
.matches(/^((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15})$/i, i18n.t('login.passSpellError'))
.required(i18n.t('login.passRequiredError')),
});
i18n.t('login.passRequiredError') works fine when I put it into a render method for checking it but it does not work with the yup. Any suggestions? Thanks in advance

Answer 1

In your schema, replace:
.email(i18n.t('login.emailSpellError'))
with
.email('login.emailSpellError')
then in your render method:
{t(`form.errors.${form.errors.email}`)}
This assumes your translation file has an entry like this:
"form": { "errors": {"login": {"emailSpellError": "Your email is invalid"}}}}
The goal here is to move the t() method into your render method and have all translations happen there.

Answer 2

Yup Validation method,
// You define the key mentioned in the translation file, in my example 'Invalid email' and 'Required'
let ForgotPasswordSchema = yup.object().shape({
email: yup.string().email('Invalid email').required('Required'),
});
In render method,
// As per your definition
isInvalid={(!!errors.email) && this.context.t(!!errors.email)}
invalidText={(errors.email) && this.context.t(errors.email)}
Translation File
export const translations = {
"cy": {
"Required":"Gofynnol",
"Invalid email":"Nid yw'r cyfeiriad ebost yn ddilys",
}
};

Answer 3

A solution will be to make a function that returns your validation schema. Then call that function in your component with the result memoized.
This way, you are guaranteed that translations for validation messages are computed on the fly.
Another advantage here is you translate at the source of the message.
// Translation file
{
"validation.invalid-email": "Email is invalid",
"validation.field-required": "Field is required"
}
// Validation schema
const forgotPasswordSchema = () => {
return yup.object().shape({
email: yup
.string()
.email(i18n.t('validation.invalid-email'))
.required(i18n.t('validation.field-required')),
});
};
// Your component
const FormComponent = () => {
const schema = useMemo(() => forgotPasswordSchema(), [i18n.language]); // NB: `[i18n.language]` is optional and `[]` will suffice depending on how you're handling language change
return <>...</>;
}

Answer 4

I've created a few custom hooks for this approach
This one to refresh error messages inside schema when is changing app language
import { yupResolver } from '#hookform/resolvers/yup';
import { useRouter } from 'next/router';
import { useMemo } from 'react';
const useSchema = (getSchema) => {
const { locale } = useRouter();
const resolver = useMemo(getSchema, [locale]);
return yupResolver(resolver);
};
export default useSchema;
And this one to set global in App component localised error messages
import { useTranslation } from 'react-i18next';
import { setLocale } from 'yup';
export const useLocalisedYupSchema = () => {
const { t } = useTranslation('common');
setLocale({
mixed: {
required: t('validation.required')
},
string: {
min: ({ min }) => t('validation.min', { min }),
max: ({ max }) => t('validation.max', { max })
},
});
};
Also usage of schemas inside component with React Hook Form
import { getChangePasswordSchema } from 'static/schemas/changePassword';
import useSchema from 'utils/hooks/useSchema';
import { useForm } from 'react-hook-form';
const AccountContentSecurity = () => {
...
const resolver = useSchema(getChangePasswordSchema);
const { reset, control, handleSubmit } = useForm({
defaultValues: {
'current_password': '',
'new_password': '',
'password_confirmation': '',
},
resolver,
});
...
and schema
import { passwordSchema } from 'static/schemas';
import { object } from 'yup';
export const getChangePasswordSchema = () => object({
'current_password': passwordSchema,
'new_password': passwordSchema,
'password_confirmation': passwordSchema,
});