React translations with component i18next do not apply response from backend

1
votes

Hi i am using react translation in my project from i18next. I need load json data from backend. I found this https://github.com/i18next/i18next-xhr-backend. But when i call it console tell me i18next::translator: missingKey en translation Sign in Sign in, but in debug I get correct response. I just import i18next in index.js like this ->

import i18n from "./core/i18n";

And here is my i18n

import i18n from "i18next";
import { reactI18nextModule } from "react-i18next";
import backend from "i18next-xhr-backend";

18n
.use(backend)
.use(reactI18nextModule) // passes i18n down to react-i18next
.init({
    backend: {
        loadPath         : process.env.API_URL + '/api/dictionaries/',
        allowMultiLoading: false,
        crossDomain      : false
    },
    lng: "en",
    fallbackLng: "en",

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

    interpolation: {
        escapeValue: false // react already safes from xss
    },
    debug: true,
    react: {
        wait: true
    }
});

Can you help me please? I don't know what I am doing wrong.

Thanks ????

SOLVED: I fix that with crossDomain: true and file response have to be just translate word for actually language. For example Login: Login not en.translation.Login: Login

Have a nice day ????

1
javascriptreactjsi18next

1 Answers

0
votes

I had a slightly different but still related issue where I had to specify keySeparator: false due to the fact that my translation file keys were strings and not nested objects: https://github.com/i18next/react-i18next/issues/747