i18next is not using the correct language in Vue project

I have a file called i18n.js and am trying to setup localization in my Vue + Vite app. It's working in the sense that a translation is taking place, but it appears that my setup is wrong based on what I am seeing in the console log.

So my browser culture is English (United States) so the code is en-US. I have a locales located here src/locales/ with the locales files having names like this:

en-US.json
de-DE.json
en-AU.json
en-CA.json
en-GB.json
en-IE.json
en-IN.json
en-PH.json
es-MX.json
fr-CA.json
fr-FR.json
ja-JA.json
nl-NL.json
pt-BR.json
zh-CN.json

The problem is that the translation file that is getting used is en-CA instead of en-US. This is the code:

import i18next from 'i18next'
import I18NextVue from 'i18next-vue'
import LanguageDetector from 'i18next-browser-languagedetector'
import i18nextXHRBackend from 'i18next-xhr-backend'

async function loadLocales (url, options, callback, data) {
  try {
    const theUrlPath = './locales/' + url + '.json'
    console.log(theUrlPath)
    const waitForLocale = await import(theUrlPath);

    callback(waitForLocale, { status: '200' })
  } catch (e) {
    console.log(e)
    callback(null, { status: '404' })
  }
}

i18next.use(i18nextXHRBackend).use(LanguageDetector)
  .init({
    detection: {
      caches: false
    },
    fallbackLng: {
      'in-ID': ['id-ID', 'id', 'en-US'],
      'zh-TW': ['zh-CN', 'zh', 'en-US'],
      'zh-HK': ['zh-CN', 'zh', 'en-US'],
      'zh-CN': ['zh-TW', 'zh', 'en-US'],
      'en-AT': ['en-GB', 'en-US'],
      'en-AU': ['en-GB', 'en-US'],
      'en-CA': ['en-GB', 'en-US'],
      'en-IN': ['en-GB', 'en-US'],
      'en-IE': ['en-GB', 'en-US'],
      'en-IT': ['en-GB', 'en-US'],
      'en-NL': ['en-GB', 'en-US'],
      'en-PH': ['en-GB', 'en-US'],
      'en-CH': ['en-GB', 'en-US'],
      cs: ['cs-CZ', 'en-US'],
      de: ['de-DE', 'en-US'],
      es: ['es-ES', 'en-US'],
      fr: ['fr-FR', 'en-US'],
      id: ['id-ID', 'en-US'],
      in: ['id-ID', 'id', 'en-US'],
      it: ['it-IT', 'en-US'],
      ja: ['ja-JA', 'en-US'],
      ko: ['ko-KR', 'en-US'],
      nl: ['nl-NL', 'en-US'],
      pt: ['pt-BR', 'en-US'],
      ru: ['ru-RU', 'en-US'],
      sk: ['sk-SK', 'en-US'],
      zh: ['zh-CN', 'en-US'],
      default: ['en-US']
    },
    interpolation: { escapeValue: false },
    whitelist: [
      'cs',
      'cs-CZ',
      'de',
      'de-DE',
      'en',
      'en-AT',
      'en-AU',
      'en-CA',
      'en-CH',
      'en-GB',
      'en-IE',
      'en-IN',
      'en-IT',
      'en-NL',
      'en-PH',
      'en-US',
      'es',
      'es-CO',
      'es-CR',
      'es-ES',
      'es-MX',
      'es-PR',
      'fr',
      'fr-CA',
      'fr-FR',
      'id',
      'id-ID',
      'in',
      'in-ID',
      'it',
      'it-IT',
      'ja',
      'ja-JA',
      'ko',
      'ko-KR',
      'nl',
      'nl-NL',
      'pt',
      'pt-BR',
      'ru',
      'ru-RU',
      'sk',
      'sk-SK',
      'zh',
      'zh-CN',
      'zh-HK',
      'zh-TW'],
    backend: {
      loadPath: '',
      parse: (data) => data,
      ajax: loadLocales
    },
    saveMissing: true,
    saveMissingTo: 'all',
    missingKeyHandler: (lng, ns, key, fallbackValue) => {
      console.log('missing locale key', lng, ns, key, fallbackValue)
    },
    missingInterpolationHandler: (text, value) => {
      console.log('missing locale interpolation', text, value)
    }
  });


export default function (app) {
  app.use(I18NextVue, { i18next })
  return app
}

Also, on the line that says console.log(theUrlPath), for some reason, this prints out:

./locales/en-CA.json
./locales/en.json
./locales/en-GB.json
./locales/en-US.json

So this brings up a few questions:

1. Why is it printing all of these? I would think that once a translation has been found (which it is, because the translation for en-CA is showing in my app), then there wouldnt be a need to run that function again.
2. Why is en-CA first since my browser culture is set to en-US?
3. Where is en.json coming from? I don't have a file named that and en is not a fallback language for any of the other languages.

Please help clarify this for me. Googling has gotten me no where.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/W2YnC0x