Admin Translation Fallback

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.6.0
  • Node Version: 18.13.0

Good evening. I found a strange problem. The localization of the panel constantly flies off in the standard en localization. And very specifically and only for some pages.

So far, I noticed it for the API tokens page.

I monitor local storage, and we can see that when we haven’t visited the page, locale is specified as uk.
image

Then go to the api token page and click add new token. After that, the locale is placed in quotes.
image

Reload the page and the locale is flipped to English.
image

When we use the English version it is not noticeable. But on the localized version in Ukrainian, which is not fully localized, it constantly flips to English.

Has anyone encountered this?
I suspect this is the behaviour of i18n when detecting messages without localization.

2

And so had a little digging in the sources. /admin/admin/src/components/LanguageProvider

The problem is that one part of the application writes the locale just as a value and the other part (I have no idea where it happens) with stringify.

And when the initialization function tries to get a locale, it can’t find the “uk” locale in the list, so it fails.
I think it’s a small but very annoying bug if you use a non-standard locale.

So my temporary solution is.

In init.js

import localStorageKey from './utils/localStorageKey';

const init = (localeNames) => {
  // Specifiy default en
  let languageFromLocaleStorage = 'en'

  // try get locale and remove quotes, else set storage to default
  try {
    languageFromLocaleStorage = window.localStorage.getItem(localStorageKey)?.replaceAll('"', '');
  }catch {
    window.localStorage.setItem(localStorageKey, JSON.stringify(languageFromLocaleStorage));
  }

  const appLanguage = localeNames[languageFromLocaleStorage] ? languageFromLocaleStorage : 'en';

  return {
    locale: appLanguage,
    localeNames,
  };
};

export default init;

In index.js

// Just add stringify to locale set item
useEffect(() => {
    // Set user language in local storage.
    window.localStorage.setItem(localStorageKey, JSON.stringify(locale));
    document.documentElement.setAttribute('lang', locale);
  }, [locale]);

And create patch with patch package