1

I am using the moment.tz library as a static resource in a lwc. I need it because my client is from Australia and the lwc needs to display the times on the component in the timezone of the site for jobs.. It works fine usually... but when I refresh the component through the browser I have noticed that sometimes it will reload the page with an error saying that "moment.tz" is not a function... so it seems that some times that the code that uses the library is being executed before the library is being fully loaded hence why it's saying the constructor is not a function. Is there any way I can ensure the library is loaded before the code is executed. The grand parent component is the one that actuall imports the library and a grandchild component actually calls the function. The regular moment library does not have any issues with loaded it seems to be only with the moment.tz library.. and this is how I call the libraries i am using the moment timezone library as a static resource in the shift approval manager... it works but some times when i am doing a "hard" refresh of the page it will reload with an error saying moment.tz is not a function so i think some times the code that uses the library is being executed before the library is fully loaded... how can i ensure that the library is fully loaded before the code runs.... here is bow i load the code, this is in the grandparent component.. enter image description here

0

3 Answers 3

1

I recommend you to look into the Internationalization Properties of the i18n module in LWC instead of having to use a third party library.

// formatDate.js
 import { LightningElement } from "lwc";
 import LOCALE from "@salesforce/i18n/locale";

 export default class FormatDate extends LightningElement {
   date = new Date(2020, 6, 7);
   formattedDate = new Intl.DateTimeFormat(LOCALE).format(this.date);// Get LOCALE dynamically from the site configuration
   // Hard Code to Australlian time zone
   formattedDate = new Intl.DateTimeFormat('en_AU').format(this.date)
  
}

Other alternative option is to use the native JavaScript using the Intl.DateTimeFormat function.

// Specify date and time format using "style" options (i.e. full, long, medium, short)
 console.log(
  new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
  timeStyle: 'long',
  timeZone: 'Australia/Sydney',
  }).format(date),
 );
// Expected output: "Sunday, 20 December 2020 at 14:23:16 GMT+11"
0

AFAIK Promise.all has no guarantees about order - it just waits for both to load. See e.g. Is Node.js native Promise.all processing in parallel or sequentially? for more detail.

I've hit this problem too with extensions to libraries.

So you will have to load them sequentially via sequential promise waits, most simply done using async/await like this:

    async renderedCallback() {
        if (this.isRendered) return;
        try {
            await loadScript(...);
            await loadScript(...);
        } catch (error) {
            handleException(this, error, true);
        } finally {
            this.isRendered = true;
        }
    }
2
  • what if i wrapped them in a promise.settleAll would that have the same effect?
    – Zdev
    Jan 2 at 15:38
  • Hi @Zdev, Do you mean Promise.settleAll - the answer there is no. When a JavaScript library loads there is typically quite a lot of initialization code that runs so the depended on library must be available (be loaded) before the dependent library is loaded. Note that both libraries will be cached so the sequential order network cost is only paid occasionally.
    – Keith C
    Jan 2 at 16:13
0

We actually took an alternative approach and wrote trigger-invoked Apex that keeps "local time" and "user time" values synchronized.

For each object that needs it we have a Time Zone field. Then in that same object each Datetime field of interest is accompanied by a "local" Date field and a "local" Time field.

The trigger code ensures that the local values are calculated (using the time zone) from the Datetime, when specified, or that the Datetime is calculated from the local values (and time zone) when they are specified.

We can then both present user and local times, but also allow the user to create or update records using either user or local times.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .