i18n default language is english or en how can i change it from configuration?
here is my configuration
import i18n from "i18next";
import Backend from "i18next-xhr-backend";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
const fallbackLng = ["nl"];
const availableLanguages = ["nl", "en"];
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng,
debug: false,
whitelist: availableLanguages,
interpolation: {
escapeValue: false,
},
});
export default i18n;
i18next Configuration Options suggests to use lng option to override language detection in this way:
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
lng: 'nl',
debug: false,
whitelist: availableLanguages,
interpolation: {
escapeValue: false,
},
});
This should solve your problem.
Related
why I get this error message:
undefined is not an object (evaluating '_i18next.default.services.formatter.add')
Code:
import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { DateTime } from 'luxon';
i18next
.use(HttpApi)
.use(LanguageDetector)
.use(initReactI18next)
.init({
react: {
useSuspense: true
},
fallbackLng: 'en',
compatibilityJSON: 'v3',
lng: 'de',
debug: process.env.NODE_ENV === 'development',
backend: {
loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
},
interpolation: {
escapeValue: false,
},
keySeparator: '.'
});
// new usage
i18next.services.formatter.add('DATE_HUGE', (value, lng, options) => {
return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});
export default i18next;
Can anyone help me to solve this issue ?
I get it from there:
https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#formatting
You're probably not using i18next >= 21.3.0
in that case use the legacy formatting option: https://www.i18next.com/translation-function/formatting#legacy-format-function-i18next-less-than-21.3.0
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
format: (value, format, lng) => { // legacy usage
if (value instanceof Date) {
return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
}
return value;
}
},
I have a problem about defining different kind of language through i18n in my React App.
I have es-MX, es-ES , zh-CN and lastly zh-TW language codes in my language array.
I have no idea how I can define them in i18n process.
How can I do that?
Here is my i18n code snippet shown below.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
resources: {
...
},
fallbackLng: 'en',
ns: ['translations'],
defaultNS: 'translations',
keySeparator: false,
interpolation: {
escapeValue: false,
formatSeparator: ','
},
react: {
wait: true
}
});
export default i18n;
Here is my answer shown below.
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
i18n.use(initReactI18next).init({
resources: {
"en-MX": {
translations: {
}
},
"es-ES": {
translations: {
}
},
"zh-CN": {
translations: {
}
},
"zh-TW": {
translations: {
}
}
},
fallbackLng: 'en',
ns: ['translations'],
defaultNS: 'translations',
keySeparator: false,
interpolation: {
escapeValue: false,
formatSeparator: ','
},
react: {
wait: true
}
});
export default i18n;
I have the following i18n setup on my react
import i18n from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import {initReactI18next} from 'react-i18next'
import Backend from 'i18next-http-backend';
i18n
.use(initReactI18next)
.use(LanguageDetector)
.use(Backend)
.init({
backend: {
loadPath: `test.com`,
},
react: {
useSuspense: false
},
whitelist: ['en', 'fr', 'es'],
fallbackLng: ['en'],
detection: {
order: ['cookie', 'navigator'],
lookupCookie: 'i18nextLng',
caches: ['cookie'],
cookieOptions: { path: '/', sameSite: 'strict' },
checkWhitelist: true
}
})
export default i18n
I have a unique product with some information as price I would like to use as defaultVariables
Reading the doc I can change the inti config adding
{
interpolation: {
defaultVariables: {price: 100}
}
}
and then {{price}} should be available on all my translations
This part is working great.
But I am getting the product from a server call and I can not find any way to update the defaultVariables once i18n has been initialized
Officially, the only way to have defaultVariables injected is via init function.
This means you have to load those values before calling init(), and then pass them via init options.
But....
you can try to do this:
i18next.services.interpolator.options.interpolation.defaultVariables = { price: 100 }
This may work, but this is for sure unsupported and not recommended.
btw: the whitelist option was replaced with supportedLngs: https://www.i18next.com/misc/migration-guide#removed-deprecated
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
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.
I am trying to load multiple translation files to react app.
So far, I've been able to seperate the files
was having issues with it trying to append the name of two different translations file -- /locales/{{lng}}/{{ns}}.json?lng=en+es&ns=translation1+translation2)
I have solved this but now it will not read from the public folder
my config file looks like the following
import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import Http from 'i18next-http-backend'
import { initReactI18next } from 'react-i18next'
import BackendAdapter from 'i18next-multiload-backend-adapter'
const languages = ['en', 'es']
i18n
.use(Backend)
.use(initReactI18next)
.init({
defaultNS: 'menus',
fallbackLng: 'en',
debug: true,
whitelist: languages,
lng: 'en',
backend: {
backends:[
new BackEndAdapter(null, {
backend: new Http(null,{
loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
allowMultiLoading: true
})
})
]
},
interpolation: {
escapeValue: false
}
})
export default i18n
package.json
{
"i18next": "^19.5.1",
"i18next-http-backend": "^1.0.15",
"i18next-multiload-backend-adapter": "^1.0.0"
}
using this as reference as to why multiload adapter is needed
It should look like this:
import i18n from 'i18next';
import HttpBackend from 'i18next-http-backend';
import { initReactI18next } from 'react-i18next';
const languages = ['en', 'es'];
i18n
.use(HttpBackend)
.use(initReactI18next)
.init({
defaultNS: 'menus',
fallbackLng: 'en',
debug: true,
whitelist: languages,
lng: 'en',
backend: {
loadPath: `${process.env.PUBLIC_URL}/locales/{{lng}}/{{ns}}.json?lng={{lng}}&{{ns}}`,
addPath: `${process.env.PUBLIC_URL}/locales/add/{{lng}}/{{ns}}`,
},
interpolation: {
escapeValue: false,
},
});
export default i18n;