3

I have encountered a very strange behavior in my Lightning component and i cannot figure out why this error occurs and how to fix it - any help would be appreciated.

First my (simplified) component code (API 44):

<aura:component implements="force:appHostable">

    <aura:attribute name="reservation" type="Object" default="{ customer: {}, lineItems: [] }" />

    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <h1>Hello {!v.reservation.customer.lastName}</h1>
    <p>You have {!v.reservation.lineItems.length} {!if(v.reservation.lineItems.length == 1, 'item', 'items')} in your reservation!</p>
    <lightning:button class="btn" label="{!if(empty(v.reservation.customer.id) &amp;&amp; not(empty(v.reservation.customer.lastname)), 'Edit', 'New')}" onclick="{!c.onCustomerButton}" />
</aura:component>

And the controller.js:

({
    init : function(component, event, helper) {
        component.set('v.reservation', {
            customer: {
                lastName: 'Smith'
            },
            lineItems: [
                { name: 'Item #1' }
            ]
        });
    },
    onCustomerButton : function(component, event, helper) { }
})

When I add this component to my navigation via a Lightning Component Tab, I get the following error when I access the tab:

aura://ComponentController: org.auraframework.throwable.AuraExecutionException: org.auraframework.impl.root.component.IfProvider: org.auraframework.throwable.AuraRuntimeException: no such property: customer

Stack Trace:

org.auraframework.throwable.AuraExecutionException: aura://ComponentController: org.auraframework.throwable.AuraExecutionException: org.auraframework.impl.root.component.IfProvider: org.auraframework.throwable.AuraRuntimeException: no such property: customer at .(markup://aura:if:1) at .(markup://c:MyContainer.$:1) at .(markup://aura:component.body[2]:1) at .(markup://lightning:button.$:1) at .(markup://aura:component.body[0]:1) at .(markup://aura:html.body1:1) at .(aura://ComponentController) at

[snip - Java Stack following]

What is most confusing is, that the init method of my controller is not invoked before the error is thrown (i.e. my Chrome Dev Console breakpoint in that method is not being hit).

If instead of adding the component via force:appHostable using a Lightning Component tab, I implement the flexipage:availableForAllPageTypes interface and add the component via a Flexipage and a Lightning Page Tab it loads perfectly fine. Unfortunately that is not a viable solution, since the page tabs suffer from some other downsides so I need to get the component tab up and running.

Does anyone have any clue about how to approach this (or point out what I'm doing wrong)?

Thanks a lot!

EDIT: Simply creating another "outer" component with the force:appHostable interface and include the one from above won't change anything - the same error message appears...

EDIT 2: Upon further investigation it seems as I've run into this known and un-fixed issue. Very frustrating...

1

You should be using a Map instead of an Object. When you use Object, the default value is parsed as a String, thus causing the error you see.

<aura:attribute name="reservation" type="Map" default="{ customer: {}, lineItems: [] }" />
  • Awesome thanks. Did NOT find that in the documentation. I wonder why it behaves differently when viewed through a flexipage or through a lightning component tab though.... – Christoph Feb 11 at 14:27
  • @Christoph It depends on what does the parsing, some components and attributes have their own rules. It is usually safest to use the correct type (e.g. Map) with aura:attribute default values to avoid parsing problems. – sfdcfox Feb 11 at 17:26
0

<aura:attribute name="reservation" type="Object" default="{ customer: {}, lineItems: [] }" />

I believe object keys need to be in single quotes in the markup, like so...

default="{ 'customer': {}, 'lineItems': [] }"

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.