Search code examples
internationalizationreact-i18next

React i18n custom language detector not working


below is my code,

I don't know why console.log('are you running?') is not showing,

what is wrong with my code?

I tried to add custom language detector..

import i18n, { LanguageDetectorModule } from 'i18next';

import { initReactI18next } from 'react-i18next';
import resources from './i18n_resources.json';
import { isLocalhost } from '@/common/detect_utils';
import { detectLanguage } from '.';

const languageDetector: LanguageDetectorModule = {
  type: 'languageDetector',
  detect: () => {
    console.log('are you running?');
    return 'en';
  },
  init: () => {},
  cacheUserLanguage: () => {},
};

i18n
  .use(initReactI18next)
  .use(languageDetector)
  .init({
    resources,
    lng: 'ko',
    fallbackLng: 'en',
    keySeparator: false,
    debug: isLocalhost,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Solution

  • If you want to use language detection, you should not set the lng option. This example works: https://codesandbox.io/s/react-i18next-http-example-forked-655ik?file=/src/i18n.js

    more information: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources enter image description here