The Components are disappearing after importing i18n in my App component - reactjs

Question

Created i18n.js file as it is said in documentary , and inserted in the file the following code
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';
const languages = ["en", "es", "ar"]
const options = {
order: [ 'localStorage', 'cookie', 'querystring', , 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
lookupQuerystring: 'lng',
lookupCookie: 'i18next',
lookupLocalStorage: 'i18nextLng',
lookupSessionStorage: 'i18nextLng',
lookupFromPathIndex: 0,
lookupFromSubdomainIndex: 0,
caches: ['localStorage', 'cookie'],
excludeCacheFor: ['cimode'],
cookieMinutes: 10,
cookieDomain: 'myDomain',
htmlTag: document.documentElement,
cookieOptions: { path: '/', sameSite: 'strict' }
}
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
lng: 'en',
debug: true,
whitelist: languages,
detection: options,
interpolation: {
escapeValue: false,
}
});
export default i18n;
then imported above mentioned file in App component,
After refreshing the already translated pages, the components are disappearing, but when i am comment i18n.js imported file in my App component out everything is working

Answer 1

Please check the browsers console, probably you will find an answer there.
From a quick look at your code, it seems that your options object has a type error inside order array, an extra comma.
..., 'querystring', , 'sessionStorage', ...
I would suggest to use eslint so you can find and fix this issues in your IDE.