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

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>

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

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.