i18n missingKey issue while using i18n instance - reactjs

Question

I am trying to integrate i18next to my project. I have created an instance and made configurations. But when I build my project, I get missingKey error in which they are not inside React component, which means the function t is called with i18n instance.
i18next config:
import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import englishTranslation from './translations/messages-en.json';
import turkishTranslation from './translations/messages-tr.json';
import arabicTranslation from './translations/messages-ar.json';
const detectorOptions = {
// order and from where user language should be detected
order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
// keys or params to lookup language from
lookupQuerystring: 'lang',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupFromPathIndex: 0,
lookupFromSubdomainIndex: 0,
// cache user language on
caches: ['localStorage', 'cookie'],
excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
// optional expire and domain for set cookie
// cookieMinutes: 10,
// cookieDomain: 'myDomain',
// optional htmlTag with lang attribute, the default is:
htmlTag: document.documentElement,
// only detect languages that are in the whitelist
checkWhitelist: true,
// optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
cookieOptions: { path: '/' },
};
const languageDetector = new LanguageDetector();
languageDetector.init(detectorOptions);
i18n
.use(initReactI18next)
.use(languageDetector)
.init({
lng: 'en',
debug: true,
resources: {
en: englishTranslation,
tr: turkishTranslation,
ar: arabicTranslation,
},
interpolation: {
escapeValue: false,
},
fallbackLng: 'en',
whitelist: ['en', 'tr', 'ar'],
});
i18n.on('languageChanged', language => i18n.reloadResources()
.then(() => console.log('Language changed to: ', language)));
export default i18n;
Console error:
i18next::translator: missingKey en translation systemPreparation systemPreparation
index.js:1 i18next::translator: missingKey en translation letsStart letsStart
index.js:1 i18next::translator: missingKey en translation infoAndApproval infoAndApproval
index.js:1 i18next::translator: missingKey en translation nextStep nextStep
...
and it goes like that.
The Javascript file that I am calling i18n instance:
import i18n from '../../../i18n';
export const property = {
text: i18n.t('videoRecording')
};

Answer 1

'videoRecording' keys is missing in messages-en.json file. Checkout also if the messages-en.json file have proper format, which should look as follow:
{
"videoRecording": "some translation"
}
I recommend you to use some tool for handling such situations.
Here is my config example
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'
const projectToken = "5e13e3019cff4dc6abe36009445f0883";
const loadPath = `https://cdn.simplelocalize.io/${projectToken}/_latest/i18next/{{lng}}/{{ns}}/_index`;
i18n
.use(Backend)
.use(LanguageDetector)
.use (initReactI18next)
.init({
// default/fallback language
fallbackLng: 'en',
ns: ["default"],
defaultNS: "default",
//detects and caches a cookie from the language provided
detection: {
order: ['queryString', 'cookie'],
cache: ['cookie']
},
interpolation: {
escapeValue: false
},
backend: {
loadPath
}
})
export default i18n;
Full project code: https://github.com/simplelocalize/simplelocalize-i18next