Can not instantiate any component from JavaScript in lightning

Question

I can not instantiate any component from JavaScript in lightning.

1. I took a specific component namespace:ModuleCard and checked that when I include it statically (just put <namespace:ModuleCard/> in markup) I actually see it without any problems.

2. I added the following line in my markup:

<aura:dependency resource="markup://namespace:WizardModuleCard" type="COMPONENT"/>

3. I made sure that I am using getCallback in the right place:

                 const wrapperComponent = this.component.find("modulesList");
                 $A.getCallback(function() {
                    $A.createComponent(
                        "namespace:WizardModuleCard",
                        {
                            
                        },
                        function(newComponent, status, errorMessage) {
                            if (status === "SUCCESS") {
                                const body = wrapperComponent.get("v.body");
                                body.push(newComponent);
                                wrapperComponent.set("v.body", body);
                            } else if (status === "ERROR") {
                                console.log("ERROR: " + errorMessage);
                            } else /*if (status === "INCOMPLETE")*/ {
                                console.log("INCOMPLETE")
                            }
                        }
                    );
                })();

4. I put a breakpoint in Chrome dev tools on the line:

console.log("ERROR: " + errorMessage);

and read the errorMessage. Here it is:

"Unknown component 'markup://namespace:WizardModuleCard'."

I used the following resources to try to solve the issue:

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

aura:dependency documentation

I am very stuck. If you had the same problem and know how to solve it, that would be amazing.

By the way, my question states any component. That is because I performed the same procedure as described above (for WizardModuleCard) for two other components. One of them is used already in my development for maybe a few months and I was able to access and instantiate it everywhere except now. Another component I created just after finding out about the current problem and I was not able to create that new component dynamically as well.

Also I checked once more that I have Enable secure and persistent browser caching to improve performance option disabled.

After trying to instantiate the component for something like 10 to 15 times (I just run and run the code which should create the component dynamically, I added the code above) I got this errorMessage:

"Definition does not exist on the client for descriptor:markup://namespace:WizardModuleCard. Client side caches have been cleared. Please reload the page."

Now I keep getting this message instead of

"Unknown component 'markup://namespace:WizardModuleCard'."

The code which I provided above works fine if I run it from the beginning in onInit.

Answer 1

The problem was the following.

I was using d3.js to add actions on button click this way:

const button = d3.select("#myButton");
button.on("mousedown", function() {
 //here I try to create a lightning component dynamically
});

Now instead of such an approach I am adding a click listener in markup:

<div id="myButton" onclick="{!c.addModuleCard}"> Add a module card </div>

FIY

It is convenient to create a class which will work with the component, then save an instance of this class into a window object in this way window.pageInfo = info. This window object will be created for each component separately and now when I will need to access some data in addModuleCard I will be able to get it using the window.pageInfo object.

It is for those who will encounter the same problem as I did and will be stuck by not knowing how to transfer the data into a different client-side function.

I am sorry, since I did not provide the whole code and those who tried to help me were not actually able to do so because of this.