react-i18next addResourceBundle is not a function

Question

I'm using react-i18next to internationalize my react app. When I trying to addResourceBundle on each module's config files it throws this error:

TypeError: i18next__WEBPACK_IMPORTED_MODULE_0__.default.addResourceBundle is not a function

Therefore, I added i18next.init command before addResourceBundle. Then it works, but show below warning and reset previously selected locale.

i18next: init: i18next is already initialized. You should call init just once!

This is my i18n.tsx file

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
 .use(Backend)
 .use(LanguageDetector)
 .use (initReactI18next)
 .init({
   fallbackLng: 'en',
   debug: true,
   detection: {
    order: ['queryString', 'cookie'],
    cache: ['cookie']
  },
  interpolation: {
    escapeValue: false
  },
  react: {
    wait: true,
    useSuspense: false,
 }
})

export default i18n;

This is my Module's Config file

import i18next from 'i18next';
import { lazy } from 'react';
import en from '../../i18n/dashboard/en';
import si from '../../i18n/dashboard/si';
import ta from '../../i18n/dashboard/ta';

i18next.init({ resources: {} });

i18next.addResourceBundle('en', 'dashboard', en);
i18next.addResourceBundle('si', 'dashboard', si);
i18next.addResourceBundle('ta', 'dashboard', ta);

const DashboardConfig = {
  settings: {
    layout: {
        mode : 'default'
    }
  },
  routes: [
    {
        path: '/dashboard',
        component: lazy(() => import('./Dashboard')),
        auth    : ['admin', 'user', 'DASHBOARD_VIEW'],
    }
  ]
};

export default DashboardConfig;

Answer 1

it happens, because you are importing i18next in your module instead of created instance in i18n.tsx.

it should be like this:

import i18next from 'path/to/i18n.tsx';