Path detector isn't working properly

[ridaeh]

🐛 Bug Report

In my order list I put only 'path' detector, unfortunately when I access mylocalhost with '/ar/' it does not work, in other hand when I access mylocalhost with '/?lng=ar' it translates the page even when I am not using querystring detector

To Reproduce

Here is my configuration :

import i18n from "i18next"
import { initReactI18next } from "react-i18next"
import { resources } from "../config/translate"
import LanguageDetector from "i18next-browser-languagedetector"

const detector = new LanguageDetector()
detector.init({
  order: ["path"],
  lookupFromPathIndex: 0,
})

i18n
  .use(detector)
  .use(initReactI18next) 
  .init({
    resources,
    fallbackLng: "en",
    supportedLngs: ["en", "ar"],
    keySeparator: false, 
    interpolation: {
      escapeValue: false, 
    },
  })

Your Environment

• runtime version: i.e. node v12.18.2 browser: chrome
• i18next version:. 19.8.3
• os: Mac
• I am using gatsby

[adrai]

You are initializing it in the wrong way.

Try:

import i18n from "i18next"
import { initReactI18next } from "react-i18next"
import { resources } from "../config/translate"
import LanguageDetector from "i18next-browser-languagedetector"

const detector = new LanguageDetector()
detector.init({
  order: ["path"],
  lookupFromPathIndex: 0,
})

i18n
  .use(LanguageDetector)
  .use(initReactI18next) 
  .init({
    resources,
    fallbackLng: "en",
    supportedLngs: ["en", "ar"],
    keySeparator: false, 
    interpolation: {
      escapeValue: false, 
    },
    detection: {
      order: ["path"],
      lookupFromPathIndex: 0,
    }
  })

[ridaeh]

thanks @adrai for your help, I do not know why it does't work in the first time. Just to make the answer clear, we do not need detector object any more.

[adrai]

Yes, you don't need to instanciate LanguageDetector yourself