Crowdin ota-client with i18next using React with Typescript is not working

[sadaktx]

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;

[sadaktx]

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