I am initializing i18next but getting error:

Uncaught TypeError: Cannot read property 'use' of undefined

Following is my code:

import i18n from 'i18next';// Getting eslint error Module imports itself.
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng,

    detection: {
      checkWhitelist: true,
    },

    debug: false,

    whitelist: availableLanguages,

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

react: 16.13.1

i18next: 19.4.5

I am initializing i18next but getting error:

Uncaught TypeError: Cannot read property 'use' of undefined

Following is my code:

import i18n from 'i18next';// Getting eslint error Module imports itself.
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-xhr-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

const fallbackLng = ['en'];
const availableLanguages = ['en', 'ar', 'fr'];

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng,

    detection: {
      checkWhitelist: true,
    },

    debug: false,

    whitelist: availableLanguages,

    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

react: 16.13.1

i18next: 19.4.5

• javascript
• reactjs
• i18next
• react-i18next

Share Improve this question Follow edited Jun 17, 2020 at 17:37 Umair Farooq asked Jun 17, 2020 at 17:27 Umair FarooqUmair Farooq 1,83311 gold badge1414 silver badges1717 bronze badges 4

• What's the version of react ? – Vivek Doshi Commented Jun 17, 2020 at 17:34
• I have editted question please check – Umair Farooq Commented Jun 17, 2020 at 17:38
• are you sure you've added these packages via npm or yarn? I have the following installed "i18next": "^17.3.1", "i18next-browser-languagedetector": "^3.1.1", "i18next-xhr-backend": "^3.2.2", – Max Carroll Commented Jun 17, 2020 at 17:41
• yes installed using yarn – Umair Farooq Commented Jun 17, 2020 at 17:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

In the index.js where the App node is mounted did you import './i18n' there also? For my setup this was required in addition to the file you showed.

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {unregister} from './serviceWorker.js'
import './i18n';

ReactDOM.render(<App />, document.getElementById('root'));
unregister()

I have a i18n.js file which is my own config for loading and initialising with my settings

// i18n.js
// https://codesandbox.io/s/react-i18next-basic-example-with-usetranslation-hook-l05ml

import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import moment from 'moment/moment'
import 'moment/min/locales';

i18n
  // load translation using xhr -> see /public/locales
  // learn more: https://github./i18next/i18next-xhr-backend
  .use(Backend)
  // detect user language
  // learn more: https://github./i18next/i18next-browser-languageDetector
  .use(LanguageDetector)
  // pass the i18n instance to react-i18next.
  .use(initReactI18next)
  // for all options read: https://www.i18next./overview/configuration-options
  .init({
    fallbackLng: "en-GB",
    detection: {
      // https://github./i18next/i18next-browser-languageDetector
      order: ['navigator'],
    },
    debug: false,
    interpolation: {      
       escapeValue: false, // not needed for react as it escapes by default
       format: function (value, format, lng) {
        if (format === 'uppercase') return value.toUpperCase();
        if (value instanceof Date) { 
          var result =  moment(value).locale(lng).format(format);
          return result;
        }
        if (format === 'intlDate') {
          return new Intl.DateTimeFormat(lng).format(value);
        }
        return value;
      },
      defaultVariables : {
        product: "Word Pigeon"
      }
    },
    // keySeparator: '_',
    react: {
      wait: true,
      escapeValue: false // not needed for react as it escapes by default
    }
  });

You could try using import * as i18n from 'i18next' and then mock out i18n mocks if you need. For example:

const i18nMock = {}
i18nMock.use = jest.fn().mockReturnValue(i18nMock)
i18nMock.init = jest.fn()
module.exports = i18nMock