Lightning component (framework) error ("no such property") and "init" handler not invoked in a Lightning Component but not in Lightning Page tab. Why?

Question

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...

Answer 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: [] }" />

Answer 2

<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': [] }"