Always get "t" is not a function error

[adharbert]

I have followed steps for many online tutorials and I always get the following error:

TypeError: t is not a function

I'm using create-react-app to create the new application

• I created the il8n.js file.
• I then updated index.js to:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { I18nextProvider } from "react-i18next";
import i18n from "./i18n";
import App from './App';

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

• Next I addted a item in the app.js file

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = (props) => {
  const {t} = props;

  return (
    <div className="App">
      <header className="App-header">
        <p>React test</p>
      </header>
      <div>
      {t("Introduction")}
      </div>
    </div>
  );
}

export default App;

Here is my il8n.js file:

import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";

i18n.use(LanguageDetector).init({
  // we init with resources
  resources: {
    en: {
      translations: {
        Introduction: "Introduction",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop",
        "Plugins to detect the user language":
          "Plugins to detect the user language",
        "Plugins to load translations": "Plugins to load translations",
        "Optionally cache the translations":
          "Optionally cache the translations",
        Advantages: "Advantages",
        "Flexibility to use other packages": "Flexibility to use other packages"
      }
    },
    jap: {
      translations: {
        Introduction: "前書き",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "Webからモバイルとデスクトップに製品をローカライズするための完全なソリューションを提供する国際化フレームワークです",
        "Plugins to detect the user language":
          "ユーザー言語を検出するためのプラグイン",
        "Plugins to load translations": "翻訳をロードするためのプラグイン",
        "Optionally cache the translations": "必要に応じて翻訳をキャッシュする",
        Advantages: "利点",
        "Flexibility to use other packages": "他のパッケージを使用する柔軟性"
      }
    },

    hin: {
      translations: {
        Introduction: "प्रस्तावना",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "एक अंतर्राष्ट्रीयकरण - ढांचा है जो आपके उत्पाद को वेब से मोबाइल और डेस्कटॉप पर स्थानांतरित करने का एक संपूर्ण समाधान प्रदान करता है",
        "Plugins to detect the user language":
          "उपयोगकर्ता भाषा का पता लगाने के लिए प्लगइन्स",
        "Plugins to load translations": "अनुवाद लोड करने के लिए प्लगइन्स",
        "Optionally cache the translations": "वैकल्पिक रूप से अनुवाद कैश करें",
        Advantages: "लाभ",
        "Flexibility to use other packages":
          "अन्य पैकेजों का उपयोग करने के लिए लचीलापन"
      }
    },

    ger: {
      translations: {
        Introduction: "Einführung",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "ist ein Internationalisierungs-Framework, das eine Komplettlösung für die Lokalisierung Ihres Produkts vom Web auf das Handy und den Desktop bietet",
        "Plugins to detect the user language":
          "Plugins zur Erkennung der Benutzersprache",
        "Plugins to load translations": "Plugins zum Laden von Übersetzungen",
        "Optionally cache the translations":
          "Optional die Übersetzungen zwischenspeichern",
        Advantages: "Vorteile",
        "Flexibility to use other packages":
          "Flexibilität zur Verwendung anderer Pakete"
      }
    },
    fre: {
      translations: {
        Introduction: "Introduction",
        "is an internationalization-framework which offers a complete solution to localize your product from web to mobile and desktop":
          "est un cadre d'internationalisation qui offre une solution complète pour localiser votre produit du Web au mobile et au bureau",
        "Plugins to detect the user language":
          "Plugins pour détecter la langue de l'utilisateur",
        "Plugins to load translations": "Plugins pour charger les traductions",
        "Optionally cache the translations":
          "Cachez éventuellement les traductions",
        Advantages: "Les avantages",
        "Flexibility to use other packages":
          "Flexibilité d'utiliser d'autres packages"
      }
    }
  },
  fallbackLng: "en",
  debug: true,

  // have a common namespace used around the full app
  ns: ["translations"],
  defaultNS: "translations",

  keySeparator: false, // we use content as keys

  interpolation: {
    escapeValue: false, // not needed for react!!
    formatSeparator: ","
  },

  react: {
    wait: true
  }
});

export default i18n;

Any ideas why this won't work? Everything I've looked shows these same steps for basic functionality, but this keeps throwing an error.

[jamuhl]

Your first react app?

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = (props) => {
  const {t} = props;

  return (
    <div className="App">
      <header className="App-header">
        <p>React test</p>
      </header>
      <div>
      {t("Introduction")}
      </div>
    </div>
  );
}

export default App;

Why should the t function be in the props? You did not add it and no HOC is used. In react there is no way to get things into the props magically -> use https://react.i18next.com/latest/withtranslation-hoc

or better https://react.i18next.com/latest/usetranslation-hook in functional components...

hope this helps...also be aware to use Suspense or turn that off (Suspense component must be outside the component using HOC or hook) https://react.i18next.com/latest/usetranslation-hook#not-using-suspense (you can turn that off globally too - but Suspense is nice - learn about it)

[totaldict]

At the end of app.js, try to wrap your component when exporting: const enhance = compose(withTranslation()); export default (enhance(App);

and don't forget the imports you need: import {compose} from 'redux'; import {withTranslation} from 'react-i18next'; This is how it works for me.