Unknown component 'markup://'... on $A.createComponent

Question

I have this error when trying to dynamically create a component, where the first time it runs it runs okay but if run again afterward it errors.

renderListItems: function (cmp, helper, recordIds) {
    if (typeof recordIds === 'undefined') {
        recordIds = cmp.get('v.recordIds');
    }
    else{
        cmp.set('v.recordIds',recordIds);
    }
    let renderedComponents = [];
    let componentName = 'c:' + cmp.get('v.itemComponent'); //c:Posting_JobItem
    cmp.set("v.renderedComponents", renderedComponents);
    for(let i = 0;i < recordIds.length;i++){
        let recordId = recordIds[i];
        console.log(recordId);
        console.log(componentName);
        $A.createComponent(
            componentName, {
                "recordId": recordId
            },
            function (newItem, status, errorMessage) {
                console.log(newItem);
                //Add the new button to the body array
                if (status === "SUCCESS") {
                    renderedComponents.push(newItem);
                    cmp.set("v.renderedComponents", renderedComponents);
                } else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                } else if (status === "ERROR") {
                    console.log("Error: " + errorMessage); //outputs - 'Error: Unknown component 'markup://c:Posting_JobItem' 
                }
            }
        );

    }
}

When this runs during init it completes happily. But when run again (with the same or different recordIds) I get an error that says 'Error: Unknown component 'markup://c:Posting_JobItem'

Answer 1

Two things I would check:

(1) does c:Posting_JobItem render if you include it statically in a .cmp file? I think that sufficiently broken code for the component you're trying to create can cause this.

(2) be absolutely sure that you're not getting hit by caching weirdness <aura:dependency /> is what you should be using, and the fact it worked once then not the second time makes me think that you might have caching enabled. Try a few hard refreshes and/or component caching (https://developer.salesforce.com/blogs/developer-relations/2017/04/lightning-components-performance-best-practices.html#settings)

To be clear on the caching, it could just be that you have a funky version of the component in your cache now, so the hard refreshes will fix it. For development, you want to disabled client-side component caching. For production, it all works except that when you release bug-fixes, user don't see the changes immediately due to the cache.

Answer 2

Tracked it down - I was calling the renderListItems function from a setTimeout to test the re-rendering after initial load and i dont think the parameters were being correctly passed to it (or it was running in a different context). After I called it via an interactin such as a button click it seems to have fired.

Needed to use $A.getCallback() as per the following: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_mod_ext_js.htm

Answer 3

Maybe you should try createComponents so you create all components at once, at least it will improve your performances.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm