LocaleSelectors.locale() always selects en_US as locale on production, but different one on localhost

Client
1

Hi,

we have a react app based on the full stack template, which in its app/page/index.tsx uses const locale = useSelector(LocaleSelectors.locale()) to select the current locale (unchanged from template).

Its results are differing between local development and production. In local development, the line from above returns { language: "de", country: "DE" } for me. When I deploy the exact same app to production and run it on my same computer, I get { language: "en", country: "US" }.

What could be the reason for that?
I don’t find any way to get an insight into what LocaleSelectors.locale() actually does to retrieve the locale…

2

Whenever a locale is set via a LocaleActions.set() action, this locale is stored in the application’s redux state and in local storage of the browser.
On application startup the value from the locale storage is used to initialize the application with the locale. Otherwise, the default locale (en_US) is used.

My guess is that

  • you have a stable URL to your local dev environment and on application startup the de_DE locale is taken from the local storage and applied
  • you don’t have a stable URL to the prod environment and thus no local storage to take the initial locale from
3

Thank you,

in the end I could resolve it by adding the default locale in appsetup.ts:

config = ApplicationFactories.createApplicationSetup({
	...
	locale: { language: "de", country: "DE" },

and temporarily adding localStorage.removeItem('locale'); on app startup in production, in order to clear the default setting (of en_US) there.