Use same resource for languages with different IETF language tag in i18next - i18next

Question

I have the following code:
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import locales from 'locales'
const resources = {
en: locales.en,
no: locales.no,
de: locales.de,
se: locales.se
}
function getDefaultLocale() {
const preferredLanguage = localStorage.getItem('preferredLanguage')
const lng = locales.languages
.map(({ code }) => code)
.find(code =>
code === preferredLanguage || // The user has set a preferred language
code === '__DEFAULT_LOCALE__' || // Default locale set at build time.
code === navigator.language
)
return lng
}
i18n
.use(initReactI18next)
.init({
resources,
lng: getDefaultLocale(),
appendNamespaceToCIMode: true
})
export default i18n
My problem is, that let's say when the English language is detected with navigator.language, it may be en, en-US, en-GB, or for Norwegian, it may be nb, nb-NO, ny-NO etc.
We would like to serve the same translations for all English language codes, and the same for all the Norwegian language codes.
My current solution is to defined resources like so:
const resources = {
en: locales.en,
'en-US': locales.en,
'en-GB': locales.en,
no: locales.no,
'nb-NO': locales.no,
'ny-NO': locales.no,
de: locales.de,
se: locales.se
}
But there must be a better solution to this! Could someone help?

Answer 1

Default behaviour for locales containing region is to fallback to the primary language code.
For instance, we have detected en-GB, but there is not translation file assigned to this locale. Assuming that en translations are in place, expected behaviour would be to proceed with them, not causing any trouble.
This practically means you can remove duplicate declaration from your initialization code:
const resources = {
en: locales.en,
no: locales.no,
de: locales.de,
se: locales.se
}
If you prefer, it could be done in a more concise manner:
const resources = { ...locales }