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.

  • Are you sure you used the right namespace? – sfdcfox Sep 10 '18 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. – hellohowdoyoudo Sep 10 '18 at 13:33
  • Okay, are you using Lightning Out? That's the only time you need aura:dependency. – sfdcfox Sep 10 '18 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. – hellohowdoyoudo Sep 10 '18 at 13:41
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.

  • 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. – Andy Visser Oct 12 '18 at 20:48

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.