title: How to get i18next.t() in plain JS file?
body: <p><strong>Overview</strong></p>
  
  <p>React application in which internationalization is required, using <a href="https://www.i18next.com" rel="nofollow noreferrer">i18next</a> to achieve this. </p>
  
  <p><strong>Problem</strong></p>
  
  <p>In project structure there is <em>constants.js</em> (Plain JS) where I am trying to get <code>i18next.t()</code> for translation. Please find the relevant code. </p>
  
  <p>index.js</p>
  
  <pre><code>import React,{Suspense} from "react";
  import ReactDOM from "react-dom";
  import "./style/index.scss";
  import App from "./app";
  import createSagaMiddleware from "redux-saga";
  import { createStore, applyMiddleware } from "redux";
  import { Provider } from "react-redux";
  import rootReducer from "./reducers";
  import rootSaga from "./sagas";
  import './i18n';
  
  const sagaMiddleware = createSagaMiddleware();
  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
  sagaMiddleware.run(rootSaga);
  
  ReactDOM.render(&lt;Provider store={store}&gt;
  
      &lt;App store={store} /&gt;
  
  &lt;/Provider&gt;,
      document.getElementById("root")
  );
  </code></pre>
  
  <p>App.js </p>
  
  <pre><code>import React from "react";
  import "./App.scss";
  import MyOrders from "../component/my-orders";
  import { toast } from "react-toastify";
  import "react-toastify/dist/ReactToastify.css";
  import i18n from 'i18next'
  
  toast.configure({ autoClose: 5000 });
  
  const changeLanguage = (lng) =&gt; {
      i18n.changeLanguage(lng);
  };
  
  
  const App = () =&gt; {
  
  
      return (
          &lt;div className="App"&gt;
              &lt;div align="left"&gt;
                  &lt;button className="btn btn-group-sm" onClick={() =&gt; changeLanguage('de')}&gt;German&lt;/button&gt;
                  &lt;button className="btn btn-group-sm" onClick={() =&gt; changeLanguage('en')}&gt;English&lt;/button&gt;
              &lt;/div&gt;
              &lt;MyOrders /&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p>i18n.js</p>
  
  <pre><code>import i18n from "i18next";
  import detector from "i18next-browser-languagedetector";
  import { reactI18nextModule } from "react-i18next";
  
  import translationEN from '../public/locales/en/translation.json';
  import translationDE from '../public/locales/de/translation.json';
  
  // the translations
  const resources = {
    en: {
      translation: translationEN
    },
    de: {
      translation: translationDE
    }
  };
  
  i18n
    .use(detector)
    .use(reactI18nextModule) // passes i18n down to react-i18next
    .init({
      resources,
      lng: "en",
      fallbackLng: "en", // use en if detected lng is not available
  
      interpolation: {
        escapeValue: false // react already safes from xss
      }
    });
  
  export default i18n;
  </code></pre>
  
  <p><strong>Question Updates with progress so far</strong></p>
  
  <p>constants.js (Plain JavaScript file, exporting multiple constant objects)</p>
  
  <pre><code>import i18n from "../../i18n";
  import { withNamespaces } from "react-i18next";
  
  function parentFunction(){
     let constantsMap = new Map();
     constantsMap.set("constant1", valueOfConstant1);
     ....
  }
  export default withNamespaces()(parentFunction)
  </code></pre>
  
  <p>translation.js (de)</p>
  
  <pre><code>{
  "MODAL": {
      "CANCEL": "Stornieren",
      "UPDATE": "Aktualisieren",
      "SAVE": "Speichern",
      "CANCEL_BOD": "Ja, Abbrechen BOD",
      "KEEP_BOD": "Nein, behalte BOD",
      "NEXT": "Nächster"
  }, .....
  </code></pre>
  
  <p>I tried the following solution with no luck:
  <a href="https://stackoverflow.com/questions/44518857/translations-for-constants-files-in-react">Solution</a></p>