Error: Definition does not exist on the client for descriptor - when using JavaScript Promises

Question

I am getting this error message when dynamically adding a lightning component:

Definition does not exist on the client for descriptor:markup://c:MyCustomLightningComponent. Client side caches have been cleared. Please reload the page. Callback failed: aura://ComponentController/ACTION$getComponent]

I use this function to inject the component:

injectComponent: function (cmp, name) {

    var self = this;
    var activeScreen = cmp.find('activeScreen');

    if (activeScreen) {
        activeScreen.destroy();
    }

    var target = cmp.find('main');

    $A.createComponent(name, {
        "aura:id": "activeScreen"
    }, function (contentComponent, status, error) {
        if (status === "SUCCESS") {
            target.set('v.body', contentComponent);
            self.displayButtons(cmp);
            self.setTitle(cmp);
            self.loadModel(cmp);
        }else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
        } else if (status === "ERROR") {
            console.log(error);
            throw new Error(error);
        }
    });
},

But dynamically loading components has been working in my code and I haven't recently changed this method.

Additionally, I know the above code works, because it successfully loads the first component, it when I try and load either of the second components that it fails.

I know the component names, i.e. c:MyCustomLightningComponent exist.

I am not using a custom component namespace.

The only thing that has changed recent relates to the code that runs prior to the injectComponent method, I have 5 Promises running and I noticed in the console log that entries appear after the error message, not sure if this is relevant.

JavaScript promises code:

saveStuff : function(cmp, model){

    var self = this;
    var savePromise1;        
    var savePromise1;
    var savePromise3;
    var savePromise4;
    var promises = [];

    promises.push(savePromise1);
    promises.push(savePromise3);

    if (model.foobar == 'true'){
        promises.push(savePromise2);
    }

    if (model.banana.foobar == 'true'){
        promises.push(savePromise4);
    }

    savePromise1 = this.saveBanana(cmp, model).then(function(result){
        model.banana.id = result;

        if (model.foobar == 'true'){

            savePromise2 = self.saveFoobar(cmp, model).then(function(result){
                model.foobar.id = result;

                if (model.apple == 'true'){
                    self.sendAppleEmail(cmp, model);
                    next = screenEnum.END;
                }

                return self.saveAppleRelationship(cmp, model).then(function(result) {
                    model.relationship.id = result; 
                }); 
            });   

        } else {

            if (model.apple == 'true'){
                self.sendAppleEmail(cmp, model);
                next = screenEnum.END;
            }
        }

        savePromise3 = self.saveOrange(cmp, model).then(function(result){
            model.orange.id = result;
        });

        if (model.banana.foobar == 'true'){

            savePromise4 = self.saveBananaFoobar(cmp, model).then(function(result){
                model.banana.foobar.id = result;        
            });    
        }
    });

    Promise.resolve(savePromise1).catch(function(error) {
        console.log('error: ' + JSON.stringify(error));
    });

    Promise.resolve(savePromise2).catch(function(error) {
        console.log('error: ' + JSON.stringify(error));
    });

    Promise.resolve(savePromise3).catch(function(error) {
        console.log('error: ' + JSON.stringify(error));
    });

    Promise.resolve(savePromise4).catch(function(error) {
        console.log('error: ' + JSON.stringify(error));
    });

    Promise.all(promises).then(function(values) {
        var next = self.getNextScreen(cmp, model);
        self.handleChange(cmp, next);
    });      
},

I am not sure where to look next - any suggestions?

Answer 1

I solved this by refactoring the JavaScript Promises to chain them together so they had all finished before the methods in Promise.all were run.