We are iterating over a collection, which we set dynamically after invoking an Aura Controller. However, one of the elements of the collections has a undefined that gets mapped to a tab name, like so

  <aura:iteration items="{!v.myObjs}" var="obj" indexVar="index">
                <lightning:tab label="{!obj.Url__c}">


The following snippet fails if Url__c is undefined with the following error:

This page has an error. You might just need to refresh it.
Component.createComponentStack: invalid config. Expected component definition, found 'undefined'.
Callback failed:

It look long time for us to investigate and find out, is there a better way to handle the use case / visualize the error?

1 Answer 1


Lightning Expressions seem to follow JavaScript logic overall which means that you can use || as a makeshift null coalescing operator. So you could try as the binding expression:

{!obj.Url__c || 'Empty Label'}

  • Yes what I would mean is that if these problems can be spotted more easily
    – Edmondo
    Oct 30, 2017 at 12:39
  • It will also coalesce anything else falsey, such as an empty array, empty string, the number 0... but I am guessing none of these are likely valid labels either.
    – Charles T
    Oct 30, 2017 at 12:39
  • 1
    Oh I see, so a broader question on debugging Lightning. Good question.
    – Charles T
    Oct 30, 2017 at 12:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .