1

Just follow the official document. https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.use_visualforce

I created an aura application - lwcvf.app

<aura:application access="GLOBAL" extends="ltng:outApp" >
    <aura:dependency resource="lightning:button"/>
</aura:application>

And, add a new visualforce page

<apex:page >
    <apex:includeLightning />

    <div id="lightning" />

    <script>
        $Lightning.use("c:lwcvf", function() {
          $Lightning.createComponent("lightning:button",
              { label : "Press Me!" },
              "lightningvf",
              function(cmp) {
                console.log("button was created");
              }
          );
        });
    </script>
</apex:page>

But the result is failed and the error message is Lightning out App error in callback function

C

Any idea?

4

There is a typo in code mentioned in the documentation example.

The correct code is as below

<apex:page>
<apex:includeLightning />
<div id="lightning" />

  <script>
    $Lightning.use("c:lwcvf", function () {
        $Lightning.createComponent("lightning:button",
            { label: "Press Me!" },
            "lightning",
            function (cmp) {
                console.log("button was created");
            }
        );
    });
  </script>
</apex:page>

Notice that the "lightning" is the ID of the domLocator where lightning out DOM should be injected and not "lightningvf"

  • Or, said the typo is the line --> <div id="lightning" /> ==> <div id="lightningvf" />. – Cray Kao Jan 6 '20 at 15:25
  • yep , it could be also that :) – Mohith Shrivastava Jan 6 '20 at 15:26
  • Thank you very much. – Cray Kao Jan 6 '20 at 15:33
  • you are welcome – Mohith Shrivastava Jan 6 '20 at 15:46

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.