[Bug]: Locale is not loaded causing crashes on pages where date is used

[Cloud11PL]

Description of the issue

While using Dashboard locally in dev mode I noticed that sometimes some pages crashed when entered. The errors in console were typically related to useDateLocalize, DateTime and everything date and locale related.

I managed to fix it by setting locale local storage item to en. If it is undefined (default behaviour) then dashboard doesn't work. You can try it by entering product details page, removing locale key from ls and refreshing the page.

Here are some errors from console

Uncaught TypeError: moment(...).locale(...).format is not a function
    at useDateLocalize.ts:13:8
    at utils.ts:32:23
    at Array.reduce (<anonymous>)
    at getChannelsAvailabilityMessages (utils.ts:20:12)
    at ChannelsAvailability (ChannelsAvailabilityCard.tsx:57:28)
    at renderWithHooks (react-dom.development.js:14985:18)
    at updateFunctionComponent (react-dom.development.js:17356:20)
    at beginWork (react-dom.development.js:19063:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)
react-dom.development.js:20085  The above error occurred in the <ChannelsAvailability> component:

    at ChannelsAvailability (http://localhost:9000/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.tsx:21:13)
    at div
    at http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1349:9
    at RightSidebar (http://localhost:9000/components/Layouts/Detail/RightSidebar.tsx:12:32)
    at div
    at http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1349:9
    at RootLayout (http://localhost:9000/components/Layouts/Detail/Root.tsx:16:30)
    at form
    at ProductUpdateForm (http://localhost:9000/products/components/ProductUpdatePage/form.tsx:193:30)
    at ProductUpdatePage (http://localhost:9000/products/components/ProductUpdatePage/ProductUpdatePage.tsx:43:37)
    at ProductUpdate (http://localhost:9000/products/views/ProductUpdate/ProductUpdate.tsx:42:33)
    at ProductUpdate (http://localhost:9000/products/index.tsx:61:26)
    at Route2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-AVUGOLK5.js?v=54e8e2e1:1866:33)
    at Switch2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-AVUGOLK5.js?v=54e8e2e1:1980:33)
    at Component (http://localhost:9000/products/index.tsx:132:18)
    at Route2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-AVUGOLK5.js?v=54e8e2e1:1866:33)
    at SectionRoute (http://localhost:9000/auth/components/SectionRoute.tsx:17:32)
    at Switch2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-AVUGOLK5.js?v=54e8e2e1:1980:33)
    at ErrorBoundary2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/react-error-boundary.js?v=54e8e2e1:39:35)
    at main
    at http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1349:9
    at div
    at http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1349:9
    at div
    at http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1349:9
    at AppLayout (http://localhost:9000/components/AppLayout/AppLayout.tsx:26:22)
    at ExternalAppProvider (http://localhost:9000/apps/components/ExternalAppContext/ExternalAppContext.tsx:20:39)
    at FeatureFlagsProvider (http://localhost:9000/featureFlags/FeatureFlagsProvider.tsx:18:40)
    at FeatureFlagsProviderWithUser (http://localhost:9000/featureFlags/FeatureFlagsProvider.tsx:44:48)
    at Routes (http://localhost:9000/Users/.../Code/saleor-dashboard/src/index.tsx:221:18)
    at ProductAnalytics (http://localhost:9000/components/ProductAnalytics/index.tsx:39:36)
    at DevModeProvider (http://localhost:9000/components/DevModePanel/DevModeProvider.tsx:14:35)
    at ExitFormDialogProvider (http://localhost:9000/components/Form/ExitFormDialogProvider.tsx:27:35)
    at AppChannelProvider (http://localhost:9000/components/AppLayout/AppChannelContext.tsx:32:38)
    at ShopProvider (http://localhost:9000/components/Shop/index.tsx:21:32)
    at AuthProvider (http://localhost:9000/auth/AuthProvider.tsx:17:25)
    at AppStateProvider (http://localhost:9000/containers/AppState/AppState.tsx:19:29)
    at BackgroundTasksProvider (http://localhost:9000/containers/BackgroundTasks/BackgroundTasksProvider.tsx:78:36)
    at MessageManagerProvider (http://localhost:9000/components/messages/MessageManagerProvider.tsx:23:35)
    at IntlProvider3 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/react-intl.js?v=54e8e2e1:2845:43)
    at LocaleProvider (http://localhost:9000/components/Locale/Locale.tsx:122:27)
    at DateProvider (http://localhost:9000/components/Date/DateProvider.tsx:41:9)
    at main
    at H1 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1757:13)
    at r2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui-next.js?v=54e8e2e1:1776:13)
    at ThemeProvider (http://localhost:9000/theme/provider.tsx:15:33)
    at rn (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui.js?v=54e8e2e1:2829:23)
    at en (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui.js?v=54e8e2e1:2814:23)
    at ThemeProvider (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-EBHPSJT6.js?v=54e8e2e1:8966:24)
    at Qu (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_macaw-ui.js?v=54e8e2e1:2916:23)
    at Router2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-AVUGOLK5.js?v=54e8e2e1:1731:34)
    at BrowserRouter2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/react-router-dom.js?v=54e8e2e1:73:35)
    at ApolloProvider (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/chunk-I7QDI76Z.js?v=54e8e2e1:77:19)
    at SaleorProvider2 (http://localhost:9000/@fs/Users/.../Code/saleor-dashboard/node_modules/.vite/deps/@saleor_sdk.js?v=54e8e2e1:2167:22)
    at App

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary2.

Steps to reproduce the problem

1. Make a clean clone of saleor-dashboard
2. Set only API_URI in .env
3. Run dashboard in dev mode
4. Open product details page in incognito mode

Or:

1. Open dashboard in incognito mode

What did you expect to happen?

Product page is open

Additional information

No response

Environment

Browser and version: … OS and version: … Dashboard version: main Core version: …

[EL-MEHDI-ESSAADI]

Removing the space after LOCALE_CODE env value fixed the problem for me

- LOCALE_CODE="EN" 
+ LOCALE_CODE="EN"

[SaujanyaSh]

I am also stuck in same issue. Please let me know if anyone gets the solution.

[Cloud11PL]

@SaujanyaSh In your browser you need to add locale of value en to localStorage