Lightning Web Component (LWC) for Visualforce was fails to run

Question

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

Any idea?

Answer 1

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"