I'm using react-hook-form, yup in NextJS for form validation. I also implemented Lingui for internationalization by following this documentation. How can I set up internationalization in the yup validator that is supported by Lingui?
The issue I am encountering is that after changing the language, the errors from the yup validator remain in English.
// src/validation/auth.js
import * as yup from 'yup';
import { t } from '@lingui/macro';
export const signupEmailSchema = yup.object({
email: yup
.string()
.email(
t({
id: 'email-valid-validation',
message: 'Must be a valid email',
})
)
.required(
t({
id: 'email-required-validation',
message: 'Email is a required field',
})
),
});
// pages/auth.js
export const Auth = () => {
const {
handleSubmit,
control,
formState: { errors },
} = useForm({ resolver: yupResolver(signupEmailSchema) });
}
<Controller
name='email'
control={control}
render={({ field }) => (
<Input
placeholder='<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="452f2a2d2b212a20052228242c296b262a28">[email protected]</a>'
{...field}
ref={null}
/>
)}
/>
{errors.email && (
<DangerText>
// need to display translated errors here
</DangerText>
)}
}
Thank you.