Translations in a sub package

Question

Im trying to translate some stuff in my React application. This works fine with i18next and react-i18next. Im using the withNamespaces HOC to render the translations and scan them with PoEdit. So far so good.

There are however two issues that i am facing. I also have a library that holds all my UI components. More like all the styling which extends from semantic-ui itself. Over there also some translations are applicable and i wanted to use the same react-i18next there as well. While testing in storybook all looks good however when i run npm link and link the package to my main application i suddenly get this error:

caught TypeError: (0 , _reactI18next.withNamespaces) is not a function

The second question i do have is that how can i extend the translations? For example i am having this library which translates field A to be "How are you doing?". However when running a project for a customer i notice that the customer wants another translation for something that is part of the lib. Is there a way then still to overwrite it? Since the fact the translations are bundled of course and loaded internally in the component.

Below is some code how it looks:

import i18n from 'i18next';
import { reactI18nextModule } from 'react-i18next';
import XHR from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(XHR)
  .use(LanguageDetector)
  .use(reactI18nextModule)
  .init({
    load: 'languageOnly',
    backend: {
      loadPath: '../dist/locales/{{lng}}/{{ns}}.json'
    },
    fallbackLng: {
      'en-US': ['en']
    },
    ns: ['uielements'],
    defaultNS: 'uielements',
    fallbackNS: 'uielements',
    debug: false,
    keySeparator: '##',
    interpolation: {
      escapeValue: false // not needed for react!!
    },
    react: {
      wait: true,
      bindI18n: 'languageChanged loaded',
      bindStore: 'added removed',
      nsMode: 'default'
    }
  });

export default i18n;

And the components itself:

export default withNamespaces()(Dialog);

Answer 1

I had the same issue. It turned out that withNamespaces HOC component was introduced in react-i18next version 8.0.0. Ensure that you have the latest version:

npm i i18next@latest react-i18next@latest

I just checked i18next v12.0.0 and react-i18next v8.3.8. Everything works fine.