[ DatePicker ]: Race condition leads to missing CLDR data

[stephen-schmith]

Bug Description

As a follow-up to https://github.com/SAP/ui5-webcomponents/issues/8535, we are still seeing the missing CLDR data error even after upgrading to ui5-webcomponents 1.24.0.

When the user tries to open the DatePicker calendar, we see the attached exception. However, our app is already importing the CLDR assets durning startup like this:

import "@ui5/webcomponents-react/dist/Assets";

This issue was reproducible in 1.23.0 as well. With 1.22.0 we do not have any issues with missing CLDR data. Unfortunately, the issue is somewhat intermittent, and I can't reproduce it on sandbox.io or similar platforms, but I do understand why it's happening.

From the debugging I've done, there seems to be a race condition inside asset-registries/LocaleData.ts where the function getLocaleData attempts to read from localeDataMap before the function fetchCldr actually sets the locale data: https://github.com/SAP/ui5-webcomponents/blob/372d27d9db9afd40ffaf85cbfab61f10284063c3/packages/base/src/asset-registries/LocaleData.ts#L137

To be clear, the fetchCldr call does eventually succeed and retrieve the CLDR data, but this happens after getLocaleData is called, so we see the exception. To work around this issue, I can preload the CLDR data in advance of rendering the date picker by calling the following framework code:

import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData";
import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale";

const locale = getLocale();
fetchCldr(locale.getLanguage(), locale.getRegion(), locale.getScript());

However, this seems like it should be unnecessary. Could the ui5-webcomponent code be updated to include a guardrail that enables fetchCldr to finish before getLocaleData tries to read localeDataMap?

Affected Component

DatePicker

Expected Behaviour

The calendar should open without issues, as it does under 1.22.0.

Isolated Example

No response

Steps to Reproduce

1. Open the DatePicker calendar.

Log Output, Stack Trace or Screenshots

Priority

None

UI5 Web Components Version

1.24.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

macOS

Additional Context

Impact is to SAP SuccessFactors Learning. We haven't been able to upgrade past 1.22.0 until I found the workaround mentioned in this ticket.

Organization

SAP SuccessFactors

Declaration

• [X] I’m not disclosing any internal or sensitive information.

[PetyaMarkovaBogdanova]

Hi @stephen-schmith , thank you for your deep analysis on the issue. Unfortunately I couldn't reproduce the console error, using our basic UI5 sample of ui5-date-picker.

Can you, please, compose a draft or example of the exact setup of your application, so we can get the chance to debug the behaviour that you are kindly describing, maybe provide a link to an isolated example if possible by forking this stackblitz.? Thank you! Best regards, Petya Markova. (UI5 Web Components Dispatcher)

[stephen-schmith]

@PetyaMarkovaBogdanova Let me keep debugging and see if I can find out what's leading to this scenario. Somehow the call to fetchCldr is triggered too late, but I can't reproduce it in a simple stackblitz environment. It must be some specific edge case in our code.

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 21 days. If there are still questions or comments, please feel free to continue the discussion. Inactive issues will be closed after 7 days!

[github-actions[bot]]

Hello, everyone! The issue has been inactive for 28 days, so I am closing the issue.

[petyabegovska]

Hi @stephen-schmith,

Did you manage to fix the issue?

[pskelin]

For anyone coming accross this issue - a similar issue in a different project turned out to be caused by having two instances of the @ui5/webcomponents-base package. One is registering the assets, the other one can't read them.

To be absolutely sure, run npm ls @ui5/webcomponents-base (or yarn why @ui5/webcomponents-base) and make sure only one version of @ui5/webcomponents-base is used across all dependencies (typically webcomponents-react and the app directly)

[stephen-schmith]

@petyabegovska - No, we're still preloading the CLDR assets during startup to work around it. But I don't think that's a huge problem, at least.