FR and SP Not Working

[jrock2004]

🐛 Bug Report

So I am trying to understand why my fr and sp languages are not being used and the fallback is being used. de works just fine for me so not sure what I did wrong with other languages

To Reproduce

A minimal reproducible example. A codesandbox example or similar or at least steps to reproduce the behavior:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';

import en from './translations/en.json';
import de from './translations/de.json';
import fr from './translations/fr.json';
import sp from './translations/sp.json';

const resources = {
  de: {
    translation: de,
  },
  en: {
    translation: en,
  },
  fr: {
    translations: fr,
  },
  sp: {
    translations: sp,
  },
};

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Expected behavior

I expect that when I load up http://localhost:9000?lng=fr that it will be in french

Your Environment

• runtime version: chrome
• i18next version: 21.6.14
• os: Mac

[jamuhl]

Should work...as de work it must be related to your fr, sp JSON files I guess...invalid JSON?

Anyway 100% related to your code and not an issue in this module...without a reproducible example there is not much we can do to help you with this...

[jrock2004]

@jamuhl When I run my FR json file thru validator it passes. Could it be something with a value?

[jamuhl]

Not really...try setting debug: true on i18next init...eventual it gives you some warnings in the browser console.

[jrock2004]

[jamuhl]

const resources = {
  de: {
    translation: de,
  },
  en: {
    translation: en,
  },
  fr: {
    translations: fr,
  },
  sp: {
    translations: sp,
  },
};

see namespace naming -> fr, sp ---> translations instead of translation

[jrock2004]

Ughhhh, thanks @jamuhl