Cannot find file: 'i18nextBrowserLanguageDetector.js' does not match the corresponding name on disk: './node_modules/i18next-browser-languageDetector/dist/esm/i18next-browser-languagedetector'.

[tiendd2608]

🐛 Bug Report

I got the below error when starting my app:

Module not found: Error: Cannot find file: 'i18nextBrowserLanguageDetector.js' does not match the corresponding name on disk: './node_modules/i18next-browser-languageDetector/dist/esm/i18next-browser-languagedetector'.

My code: src/i18n.ts

import i18n from 'i18next'
import languageDetector from 'i18next-browser-languageDetector'
import { initReactI18next } from 'react-i18next'

i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    resources: {
      en: { translation: enLanguage },
      ja: { translation: jaLanguage },
    },
    lng: cookie.get('i18n_locale') || I18nConfig.FALLBACK_LNG,
    saveMissing: true,
    fallbackLng: I18nConfig.FALLBACK_LNG,
    supportedLngs: I18nConfig.SUPPORTED_LNGS,
    returnEmptyString: false,
    interpolation: { escapeValue: false },
    nsSeparator: false,
  })
export default i18n

Please help me fix this. Thank you!!!

Your Environment

• i18next: ^21.8.14
• i18next-browser-languagedetector: ^6.1.4,
• react-i18next: ^11.18.1,
• react: ^18.2.0,

[adrai]

Sorry, not able to reproduce. I suspect your setup has some bundling issue... check webpack etc...

[tiendd2608]

@adrai

Sorry, not able to reproduce. I suspect your setup has some bundling issue... check webpack etc...

I use the default webpack of create-react-app with typescript

[adrai]

Please provide a reproducible example. It seems to work here: https://locize.com/blog/how-to-internationalize-react-i18next/

[tiendd2608]

I forgot to import i18n into App.tsx. Thank you very much!