PWA studio (venia) how add traslates to site? react-i18next not working now

Question

I don't understand, why this code isn't working inside the pwa-studio. I tried to find a solution to solve the problem but haven't found anything on this topic.

I've imported i18n into the index.js. It is working on a simple React Application, however it doesn't work on PWA Studio. Maybe I am connecting it wrongly or I've placed the file with translations in a wrong way. For now, I can't get in how it works in PWA Studio.

---

i18n.js file

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

// the translations
// (tip move them in a JSON file and import them)
const resources = {
    en_US: {
        translation: {
            "Welcome to React": "Welcome to React and react-i18next"
        }
    }
};

i18n
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        resources,
        lng: "en",

        keySeparator: false, // we do not use keys in form messages.welcome

        interpolation: {
            escapeValue: false // react already safes from xss
        }
    });

export default i18n;

---

my custom component and include translate them:

import React, { Suspense } from 'react';
import {mergeClasses} from "@magento/venia-ui/lib/classify";
import defaultClasses from './socials.css';
import Buttons from "./buttons";

import { useTranslation } from 'react-i18next';

const Socials = props => {

    const classes = mergeClasses(defaultClasses, props.classes);
    const { t, i18n } = useTranslation();
    return (
        <div className={classes.block}>
            <div className={classes.auth}>
                <div className={classes.top}>
                    Welcome back to React
                    **<h1>{t('Welcome to React')}</h1>**
                </div>
                <span className={classes.bottom}>
                    Log in with a single react account.
                </span>
            </div>
            <Buttons innerText='enter' />
            <span className={classes.or}>or</span>
        </div>
    );
};

export default Socials;

Answer 1

You have two problems there:

1. Change the lng value to en_US to be the same key value of your resources
2. Wrap your application by I18nextProvider

For another solution, PWA-Studio providing internationalization technique. For Magento version 2.4, use the storeSwitcher from PWA-Studio, the develop version has all dependencies for the full function.