2

I am displaying a lightning component in visualforce page using the following code

<apex:page standardStylesheets="false">
    <apex:includeScript value="/lightning/lightning.out.js" />

    <div id="lightning" />

    <script>
        $Lightning.use("NVX:TestApp", function() {
          $Lightning.createComponent("NVX:TestCmp",
          { label : "Press Me!" },
          "lightning",
          function(cmp) {
            // do some stuff
          });
        });
    </script>
</apex:page>

The component code is

<aura:component access="GLOBAL">
    <ui:inputDate aura:id="inputDate" />
</aura:component>

But the data field is not rendered . I am getting this error in VF page.

afterRender threw an error in 'markup://ui:inputDate' : Cannot read property 'getElement' of undefined

1 Answer 1

3

We've recently discovered an issue with a few of the ui:input/output components that the root cause is that they expect at least one server trip to an Aura server side controller method to have happened (not a valid assumption) before they are used and LC4VF optimized away that initial trip (better performance). I have a fix in progress that will maintain the performance benefits LO has currently but provide the localization metadata that these components expect to have available in their environment. I plan to release this in a patch to Winter'16 (safe harbor of course but too many folks are hitting this and I hate the workaround I have developed).

Can you also post the contents of NVX:TestApp here? We are seeing a number of folks putting content in their extensions of ltng:outApp other than tags and I want to make sure that is not also the case here.

So here is the workaround to keep you moving. You should not need this for very long:

<div id="lightning" />

<script>
function runAfterGlobalsLoaded(callback) {
    $A.run(function() {
        var labelAction = $A.get("c.aura://ComponentController.loadLabels");         
        labelAction.setCallback(this, function() {
            callback();          
        });
        $A.enqueueAction(labelAction);
    });   
}

$Lightning.use("NVX:TestApp", function() {
    runAfterGlobalsLoaded(function() {
        $Lightning.createComponent("NVX:TestCmp", {}, "lightning");           
    });
});   
</script>

1
  • This is my app code. <aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="NVX:TestCmp"/> </aura:application>
    – Monish
    Commented Oct 29, 2015 at 11:10

You must log in to answer this question.

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