3

I am using Lightning out to display LWC on VF page. I have included the definition of LWC on the VF page. Even then, my LWC loads very slowly on the VF page and I get the following warning in the console of my browser: enter image description here

I did all the steps as per this salesforce documentation but I am still getting the warning. It has slowed the loading of my LWC and I am not able to find the reason why. Please help. Thank You😄.

VF page Code:

<apex:page showHeader="true" sidebar="false" controller="ControllerCustomReportPreview"  tabStyle="Account" >

    <style>
        .headerRow .TableTitle {
            text-align:center;
        }
    </style>

    <apex:includeLightning />

    <div id="customReportPreviewLWC" /> 

    <script>
        //Use the app
        $Lightning.use("c:customReportApp", function() { 
            //Create the LWC
            $Lightning.createComponent("c:customReportPreviewLWC", {
                //pass parameters if required
            },
            //This name will be used to place LWC                           
            "customReportPreviewLWC",
                function(component) {//call back function
                 console.log("Lightning Web Component  created Successfully!!");
                }
           );
        });
    </script>

</apex:page>

customReportApp.app code:

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:customReportSelectionLWC"/>
    <aura:dependency resource="c:customReportFilterLWC"/>
    <aura:dependency resource="c:customReportSortingLWC"/>
    <aura:dependency resource="c:customReportPreviewLWC"/>
</aura:application>
8
  • 1
    Have you tried removing the dependencies that you don't need? – Sander de Jong Oct 1 '20 at 6:35
  • 1
    The fact that it complains about the missing dependency and that the LWC loads slowly, but it does load, suggests that customReportApp.app is not deployed (properly). If you open Developer Console, then File > Open Lightning Resources. Can you find customReportApp.app in the list? – Sander de Jong Oct 1 '20 at 8:16
  • 2
    can you try extending ltng:outAppUnstyled class. Also, try adding the component using the same way that we used to call component inside another component like <c:customReportSelectionLWC /> – Amit Singh Oct 1 '20 at 10:48
  • 1
    Looks like a similar issue has been reported with lightning aura component (check this: trailblazer.salesforce.com/issues_view?id=a1p3A000001FTDpQAO). Can you check whether Enabling CDN for Lightning component framework resolves your issue? Ref: releasenotes.docs.salesforce.com/en-us/winter19/release-notes/… – arut Oct 3 '20 at 6:28
  • 1
    @AmitSingh extending ltng:outAppUnstyled class did not work. But your suggestion to add the component as <c:customReportSelectionLWC /> instead of <aura:dependency resource="c:customReportSelectionLWC"/> worked! I am not getting the warning anymore. Thank You. How was it not mentioned in the official documentation?! – SFdev Oct 5 '20 at 7:09
1

In the salesforce documentation, the following is mentioned:

A standalone Aura dependency app is used only to specify the dependencies for Lightning Out.

This standalone Aura dependency app uses the myAppComponent Lightning web component in the default c namespace.

<aura:application access="GLOBAL" extends="ltng:outApp"> 
    <aura:dependency resource="c:myAppComponent"/> 
</aura:application>

In the warning message too, it is suggested to use <aura:dependency resource="c:myAppComponent"/>. Turns out that it does not work. The warning persists.

In the same documentation, there is a Note below that says the following:

NOTE To reference a Lightning web component in an Aura app or an Aura component, use the naming convention <namespace:camelCaseComponentName>.

When we use <namespace:camelCaseComponentName>, the warning disappears. The documentation gives the impression that both methods will work but it is <namespace:camelCaseComponentName> (which is mentioned in the Note) that actually works.

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.