I want to make sure all the scripts are loaded, before I do any operation,

    renderedCallback() {
        loadScript(this, JSPDF),
    ]).then(() => {
        window.console.log('Files loaded.New');
        console.log('MVK inside connected callback-->'+this.articleIds);
    }).catch(error => {
        window.console.log("Error " + error.body.message);

THis works, however as it is asynchronous, callbacks are getting out of order. So I'm concerned if that'll be a problem

I want something like this in LWC:

<ltng:require scripts="{!join(',', $Resource.Jquery, $Resource.bootstrap + '/BootstrapJs.min.js'}" styles="{!$Resource.bootstrap + '/BootstrapCss.min.css'}" afterScriptsLoaded="{!c.doInit}" />

Here we are joining scripts.


Promise.all waits for all the promises to resolve() (assuming none reject(), which would go to the .catch(), so then() won't be called until all the loadScript() functions to finish. In other words, it shouldn't matter the order in which the scripts load. Note that the Aura version also loads the scripts in any order; the join() method is needed only because of how ltng:require parses the scripts attribute. There is no guarantee that the order will be maintained.

Note that if you absolutely wanted to force the scripts to load before even connectedCallback(), you could attempt to expose the scripts by way of importing. There's an example of this in this answer. If your code minified is less than 131kb (per script), this can save you the trouble of loading scripts asynchronously.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.