9

I'm trying to implement react-i18next on my create-react-app application with useTranslation() hooks.

However, in the console, the debug mode shows

i18next::backendConnector: loading namespace billingAddress for language en failed failed parsing /locales/en/billingAddress.json to json

and

i18next::translator: missingKey en billingAddress Form.email Customer Email (Default)

i18next.ts

import {initReactI18next} from "react-i18next";
import i18next from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import XHR from "i18next-xhr-backend";

i18next
// .use(Backend)
    .use(LanguageDetector)
    .use(XHR)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init({
        lng: "en",
        fallbackLng: {
            'en-US':['en'],
            'zh-CN':['cn'],
            default:['en']
        },
        debug: true,
        ns: ['billingAddress'],
        defaultNS: 'billingAddress',
        // load: "currentOnly",
        interpolation: {
            escapeValue: false // react already safes from xss
        },
        keySeparator: false,
        // backend: {
        //     loadPath: "/locales/{{lng}}/{{ns}}.json",
        //     crossDomain: true
        // },
        react: {
            wait: true,
        }
    });

export default i18next;

files

├── src
│   ├── i18next.ts
│   ├── locales
│   │   ├── cn
│   │   │   └── billingAddress.ts
│   │   └── en
│   │       └── billingAddress.ts
│   ├── index.tsx

version

"react": "^16.8.4",

"i18next": "^15.0.7",

my translation file

export default{
  "Form": {
    "emailLabel": "customer Email",
    "emailPlaceholder": "email@emial.com",
  }
}

my billingAddress file

  const [t, i18n] = useTranslation();

    const changeLanguage = (language: string) => (e: React.MouseEvent) => {
        i18n.changeLanguage(language)
    };

const someValues: billingAddress = {
emailLabel: t("Form.emailLabel","Customer Email")
}

return (
<div>
 <button onClick={changeLanguage("en")}>English</button>
<OtherComponent value={someValues} />
</div>
)

I'm quite confuse how to load namespace now... any ideas?

Thanks in advance!

Community
  • 1
  • 1
WhyINeedToKnowThis
  • 157
  • 1
  • 2
  • 9

1 Answers1

3

You might just follow the sample here: https://github.com/i18next/react-i18next/tree/master/example/react/public/locales

Using xhr backend you need to provide valid JSON files as source - that's all.

jamuhl
  • 4,352
  • 2
  • 25
  • 31
  • Thanks! I think that works. Just one more question, is there any way that `i18n.changeLanguage` function could pass `en-us` as language string, cuz I'm try to combine it with moment.js, but when I call `i18n.changeLanguage('en-us')` it won't work unless passing `en`. – WhyINeedToKnowThis Apr 01 '19 at 22:42
  • fyi: a newer react-i18next guide can be found here: https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb/stats yhat uses the i18next-http-backend instead the i18next-xhr-backend – adrai Feb 12 '22 at 11:04
  • There's also a nice video about i18next with a second part all dedicated to react: https://youtu.be/SA_9i4TtxLQ – adrai Jun 21 '22 at 08:37