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?


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 – Edmondo1984 Oct 30 '17 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 '17 at 12:39
  • 1
    Oh I see, so a broader question on debugging Lightning. Good question. – Charles T Oct 30 '17 at 12:40

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.