[Solved] Remove warning "i18next: init: i18next is already initialized. You should call init just once" – I18next

The Problem:

An application utilizes two configurations of i18next for various contexts, prompting a warning during testing. The warning reads: "init: i18next is already initialized. You should call init just once!". The developer wants to explore alternative approaches to resolve this warning, particularly in cases where specific middleware like "Backend" and "LanguageDetector" should not be employed during tests while using the testing configuration of i18next.

The Solutions:

Solution 1: Function and call based Implementation

The issue was that in the test env, 2 instances were loaded because both were initialized in each file due to the chaining of the init method. This can be fixed by controlling the initialization in both prod and test env. The fixes were implemented by creating a function for each env and then just calling that function where needed.

Solution 2: Create 2 instances using `createInstance()` method

Create 2 different instances of i18next using the `createInstance()` method, one for the app and one for the tests. Using the `createInstance()` ensures that you have separate instances of i18next for your app and tests. This way, you can initialize each instance with different configuration and data without affecting the other instance.

<!– begin snippet: js hide: false console: true babel: false –>

<!– language: lang-js –>
// i18n.ts (for app)
import i18n as i18next from ‘i18next’;
import Backend from ‘i18next-http-backend’;
import LanguageDetector from ‘i18next-browser-languagedetector’;
import from ‘react-i18next’;

const i18n = i18next.createInstance();
i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        load: 'languageOnly',
        fallbackLng: localStorage.getItem('lang') ?? 'es',
        debug: import.meta.env.DEV,
    });

export default i18n;

// i18nForTests.ts (for tests)
import i18n as i18next from 'i18next';
import { initReactI18next } from 'react-i18next';

const i18n = i18next.createInstance();
i18n.use(initReactI18next).init({
    lng: 'es',
    fallbackLng: 'es',
    ns: ['translationsNS'],
    defaultNS: 'translationsNS',
    debug: false,
    interpolation: {
        escapeValue: false, // not needed for react!!
    },
    resources: { es: { translationsNS: {} } },
});

export default i18n;

<!– end snippet –>

Then, use the I18nextProvider from react-i18next to provide the appropriate i18n instance to your app and test components.

You’ll need to import your i18next instances in the relevant components/files:

<!– begin snippet: js hide: false console: true babel: false –>

<!– language: lang-js –>
// main.tsx
import i18n from ‘./i18n’;

...

const App = () => {
  return (
    <I18nextProvider i18n={i18n}>
      <AppContent />
    </I18nextProvider>
  );
};

export default App;

// setupTests.ts
import i18nForTests from "./i18nForTests"

const WithProviders = ({ children }: { children: React.ReactNode }) => (
    <MemoryRouter>
        <I18nextProvider i18n={i18nForTest}>
            <ChakraProvider>{children}</ChakraProvider>
        </I18nextProvider>
    </MemoryRouter>
);

<!– end snippet –>

This approach should eliminate the warning about multiple initializations and allow you to use separate i18next instances for your app and tests effectively.

Video Explanation: