2

Was trying to render a basic conditional section/div using aura:if tag.

It throws an error when the button is included inside conditional block.

Uncaught TypeError: a.getAttribute is not a function

Note:

  1. No jQuery or external libraries is included.
  2. This error is not breaking any functionality, would like to know the cause.

Here is the code:

component:

<!-- attribute -->
<aura:attribute name="page" type="String" default="1"/>

<!-- conditional view -->
<aura:if isTrue="{!v.page == '1'}">
    First page
    <button type="button" class="slds-button slds-button--neutral slds-button--brand"
        onclick="{!c.firstStepAction}">Next</button>
    <aura:set attribute="else">
        Second page
        <button type="button" class="slds-button slds-button--neutral slds-button--brand"
            onclick="{!c.secondStepAction}">Previous</button>
    </aura:set>
</aura:if>

controller:

({
    // to navigate from first to second step
    firstStepAction: function(component, event, helper) {
        component.set("v.page", '2');
    },
    // to navigate from first to second step
    secondStepAction: function(component, event, helper) {
        component.set("v.page", '1');
    }
})

Error in console (not breaking any functionality):

enter image description here


It works if I move the button out of aura:if as below:

<!-- attribute -->
<aura:attribute name="page" type="String" default="1"/>

<!-- buttons moved out of aura:if -->
<button type="button" class="slds-button slds-button--neutral slds-button--brand"
    onclick="{!c.firstStepAction}">Next</button>
<button type="button" class="slds-button slds-button--neutral slds-button--brand"
    onclick="{!c.secondStepAction}">Previous</button>

<!-- conditional view -->
<aura:if isTrue="{!v.page == '1'}">
    First page

    <aura:set attribute="else">
        Second page

    </aura:set>
</aura:if>
3
  • 1
    Do you get the error in a different browser that has no or different browser extensions installed?
    – Keith C
    Sep 1 '17 at 13:47
  • You are right, Exception was from a chrome plugin. I had not tried this in different browser as another page with similar functionality was working fine. Thanks for your help and please post this as an answer; so that I can mark it as answered.
    – Raul
    Sep 1 '17 at 14:04
  • Added an answer.
    – Keith C
    Sep 1 '17 at 14:57
2

Per the comments, a Chrome extension was generating the error.

Browser extensions have very privileged access - see e.g. Browser Extensions Are a Privacy Nightmare: Stop Using So Many of Them - and so can add to the browser window and interfere with code you are developing or using.

1
  • Earlier it used to show the exception in file name of the error in console. I guess they have removed it from name and now it shows chrome-extension://{extensionId} only when we hover.
    – Raul
    Sep 1 '17 at 15: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.