getElement not working in LockerService

Question

I noticed after I turned on LockerService, a bunch of my components stopped working and it seems like all of them are choking with "cmp.find(...).getElement is not a function".

Reading some of the other questions posted here it seems like the error will be thrown if you try to get the inner content of an element that is not in your namespace, but I don't think that applies to my case.

I've created a small example that can be replicated easily, and I don't see any reason why getElement should not work here.

The following code just tries to call getElement until it no longer throws an error. Needless to say, it never happens.

TestApp.app

<aura:application implements="force:appHostable">
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div aura:id="test">wow</div>
</aura:application>

TestAppController.js

({
    doInit : function (cmp, event, helper) {
        helper.getStuff(cmp, helper)
    }
})

TestAppHelper.js

({
    getStuff : function(cmp,helper) {
        try { 
            console.log(cmp.find("test").getElement());
        } catch (exc) {
            window.setTimeout($A.getCallback(function(){if (cmp.isValid()) {helper.getStuff(cmp,helper);}}), 500);
            return;
        }
        console.log("Finally it's available")
    }
})

Answer 1

To solve this, you need the help of renderer in this case. Since init handler long before DOM is rendered in the view, DOM won't be available which inturn causes error:

cmp.find(...).getElement is not a function

Refer this answer deep down it solves the same issue.

With afterRenderer in place, your code looks like below:

TestApp.app

<aura:application>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div aura:id="test">wow</div>
</aura:application>

TestRenderer.js

({
    // Your renderer method overrides go here
    afterRender : function(cmp,helper){
        this.superAfterRender();
        console.log(cmp.find("test").getElement());
    }
})