Admin Panel Locale Management#

The Strapi admin panel manages UI language through a layered system: a Redux slice holds the active locale, a React Intl provider reads from it to translate strings, and DOM mutations keep the HTML lang attribute in sync. Several recent bug fixes harden this pipeline against race conditions and performance regressions.

Two locales, one admin: The admin UI locale (which language the interface renders in) is stored in Redux and localStorage. The content i18n locale (which locale's content is being edited) is stored in the URL query string as ?plugins[i18n][locale]=<tag>. These are independent and must not be confused.

Redux State: admin_app.language#

The locale is stored in the admin Redux slice (exposed as admin_app) in reducer.ts. The relevant shape is:

language: {
  locale: string; // active BCP-47 tag, e.g. "fr"
  localeNames: Record<string, string>;
}

The setLocale action does three things atomically:

1. Updates state.language.locale in Redux.
2. Writes the value to localStorage under the key strapi-admin-language 1.
3. Sets document.documentElement.lang via DOM mutation.

Initialization sequence:

• App startup: StrapiApp.render() reads localStorage (LANGUAGE_LOCAL_STORAGE_KEY), normalizes the value with normalizeAdminLocale(), and seeds the Redux initialState before any React render. App.tsx mirrors this by setting document.documentElement.lang in a one-time useEffect 2.
• Post-login: Auth.tsx dispatches setLocale(normalizeAdminLocale(user.preferedLanguage)) whenever user data is loaded, overriding the localStorage default with the per-user preference 3.

React Intl Layer: LanguageProvider#

LanguageProvider is a thin wrapper around React Intl's IntlProvider. It reads state.admin_app.language.locale via useTypedSelector and deep-merges translations: defaultsDeep(messages[locale], messages.en), so any untranslated key falls back to English.

A onError handler silences MISSING_TRANSLATION errors 4. Without it, content types with many fields in a non-English locale flood the event loop with hundreds of thrown errors per keystroke, causing 1–3 second typing delays in the Content Manager. Non-MISSING_TRANSLATION errors are still surfaced via console.error.

i18n Locale in Content Manager URLs#

The i18n plugin stores the active content locale in the URL query string as ?plugins[i18n][locale]=<tag>. This is separate from the admin UI locale held in Redux.

Navigation race condition (PR #26167): LeftMenu.tsx previously only set pathname on SubNav.Link targets. The i18n plugin's useEffect re-added the locale query param after mount, leaving one render cycle where locale=undefined — enough to trigger a TypeError: Cannot read properties of undefined (reading 'attributes') crash 5. The fix reads useLocation().search and forwards the current plugins[i18n][locale] param directly in the to.search property of each SubNav.Link.

Component Schema Race Condition#

useDocumentLayout builds edit layouts by resolving component schemas from the RTK Query cache. During content-type navigation, the content-type configuration response (useGetContentTypeConfigurationQuery) can resolve before the new content type's component schemas are in cache. Accessing components[uid].attributes on an undefined entry throws the same TypeError 5.

The fix in useDocumentLayout.ts and ComponentConfigurationPage.tsx adds an early-return guard inside the Object.entries(data.components).reduce(...) loop: if components[uid] is absent, the entry is skipped and the useMemo re-runs once schemas load.

Stale Admin Configuration Guard (PR #26625)#

A broader hardening pass 6 addresses the same class of crash — Cannot read properties of undefined — triggered by persisted Content Manager layouts that reference deleted fields, missing metadata, or invalid mainField values. Key additions:

• A normalizeContentManagerLayout utility strips stale layout entries before they reach render paths.
• Guards added in Filters.tsx, Media.tsx, DynamicComponent.tsx, and useDocumentLayout.ts for missing attributes, MIME types, and component UIDs.
• useMenu.ts / useSettingsMenu.ts now guard against missing admin menu/settings arrays.

The fix is intentionally non-mutating — invalid entries are dropped at render time, not written back to the persisted configuration.

Key Files#