react-i18next setup fails with react-redux component

Question

I have tried all the ways to onboard react-i18next , react-redux and typescript app.

Below is my index.js file:

 import * as enTranslations from "./assets/locales/en";
 import * as frTranslations from "./assets/locales/fr";
 const resources = {
 en: { messages: enTranslations }
 };

  i18next
 .use(initReactI18next)
 .init({
  resources,
  fallbackLng: "en",
  debug: true,

 // have a common namespace used around the full app
 ns: ["translations"],
 defaultNS: "translations",
 namespaceSeparator: '.',
 keySeparator: false, // we use content as keys
 interpolation: {
   escapeValue: false
 },
 lng: "en",

 }).then(() => {
 ReactDOM.render(
  <I18nextProvider i18n={i18next}>
    <Provider store={store}>
      <CookiesProvider>
        <App />
      </CookiesProvider>
    </Provider>
  </I18nextProvider>,
  document.getElementById('root')
 )
});

My app.js code:

 export default compose(withTranslation("translations"), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

My component render method and export code:

export default compose(
withTranslation('translations'),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

render method:

render() {
const { t } = this.props;
return (
    <h1>{CLIENTS_HEADER_TITLE} {t('title')}</h1>
);

But i always see the key printed instead of key value. I didnt find any example using react-redux.

I am using "react-i18next": "^11.0.1" and i get missing key error.

Answer 1

Below code changes make it work now.

My app.js code:

 export default compose(withTranslation(), connect(
 mapStateToProps,
 mapDispatchToProps
 ))(App);

My component export code:

export default compose(
withTranslation(),
connect(mapStateToProps, mapDispatchToProps)
 )(UserComponent);

Moved init to a file i18n.js:

   import enTranslations from "./assets/locales/en";

    const resources = {
      en: {
        translation: {
          "title": "Welcome  {{name}}"
        }
      }
    };

    i18n
      .use(initReactI18next)
      .init({
        resources,
        lng: "en",
        keySeparator: "false",
        debug: true,
        interpolation: {
          escapeValue: false
        },
        useDataAttrOptions: true
      });

    export default i18n;

The debug console output helped me to sort of the issue.

 //import enTranslations from '....'
 {title: "Welcome  {{name}}", intro: "To get started and save to reload."}

 //import * as enTranslations from '....'
 Module {default: {…}, __esModule: true, Symbol(Symbol.toStringTag): 
 "Module"}
  default: {title: "Welcome  {{name}}", intro: "To get started and save to 
  reload."}
  Symbol(Symbol.toStringTag): "Module"
 __esModule: true