Tukukkk

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);

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.