Crowdin ota-client with i18next using React with Typescript is not working
sadaktx opened this issue · comments
I'm trying to use the wiki article for using the Crowdin ota-client to work with i18next using React with Typescript in my project. I notice that the read method never gets invoked.
I was originally using react-i18next with local json files but would need to use the Crowdin ota-client with i18next to do the translations on the fly.
Please see code snippet below. Any help will be greatly appreciated.
Thanks
React ^17.0.2
i18next ^22.0.5
@crowdin/ota-client ^0.7.0
i18next-browser-languagedetector ^7.0.1
-------- File 18n.ts (invoked from index.tsx) ------------
import i18next, { BackendModule } from 'i18next';
import otaClient from '@crowdin/ota-client';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
//Import all translation files
import COMMON_EN from 'locale/en/common.json';
import FPNS_EN from 'locale/en/fpns.json';
import MH_EN from 'locale/en/mh.json';
import COMMON_DE from 'locale/de/common.json';
import FPNS_DE from 'locale/de/fpns.json';
import MH_DE from 'locale/de/mh.json';
const crowdin_hash = 'xxxxxxxxxxxxxxxx';
const resources = {
en: {
common: COMMON_EN,
fpns: FPNS_EN,
mh: MH_EN
},
de: {
common: COMMON_DE,
fpns: FPNS_DE,
mh: MH_DE
}
};
const backendModule: BackendModule = {
type: 'backend',
init: () => {
console.log('Init');
},
read(language: string, namespace: string, callback: any) {
const client = new otaClient(crowdin_hash);
console.log('Calling Backend module::read method');
client
.getStringsByLocale(undefined, language)
.then((value) => callback(null, value))
.catch((e) => callback(e, null));
}
};
i18next
.use(backendModule)
//.use(initReactI18next)
.use(LanguageDetector)
.init(
{
//resources,
resources: {},
fallbackLng: 'en',
interpolation: {
escapeValue: false
}
},
() => {
console.log('Trying to invoke i18next');
i18next.t('abc');
// const outputElement = document.getElementById('output') as HTMLInputElement;
// outputElement.innerHTML = i18next.t('key');
}
);
export default i18next;
It is not an issue. It happened, when you use backend and sent in an empty resources in init without the sending the partialBundledLanguages as true in the options