2

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.

enter image description here

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.

4
  • Are you sure you used the right namespace?
    – sfdcfox
    Sep 10, 2018 at 13:31
  • @sfdcfox, absolutely sure. Using that namespace allows me to incorporate the component statically (by putting it directly in .cmp html). And the component displays successfully, there are no errors, no warnings, it looks as expected. Sep 10, 2018 at 13:33
  • Okay, are you using Lightning Out? That's the only time you need aura:dependency.
    – sfdcfox
    Sep 10, 2018 at 13:37
  • @sfdcfox, no. I am not using Lightning Out. But it did not work without the addition of <aura:dependency/> (as well as with it). I will remove it and try again. Thank you for the advice. Sep 10, 2018 at 13:41

1 Answer 1

0

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.

1
  • To be precise, you problem was that you didn't wrap your callback in $A.getCallback(). Just fought with this shit for 2 hours. Up yours SFDC. Oct 12, 2018 at 20:48

You must log in to answer this question.

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