Unable to Save a Custom Lightning Component in an `aura:if` With a New Attribute

Question

I have a custom Lightning component which I have recently added a new attribute to using the Salesforce Developer Console:

<!--Child.cmp-->
<aura:component>
    <aura:attribute name="existingAttribute" type="String" required="true"/>
    <!-- This is a new attribute I've added today-->
    <aura:attribute name="newAttribute" type="String" required="true"/>
<aura:component/>

However, when I come to update the existing code in a parent component - I'm unable to save the component due to an error:

FIELD_INTEGRITY_EXCEPTION

Failed to save Parent.cmp: The attribute "newAttribute" was not found on the COMPONENT markup://c:Child: Source

The code for the parent component contains the component nested deep into the code, using an aura:iteration and an aura:if.

<!--Parent.cmp-->
<div>
    <form>
        <aura:iteration items="{!v.items}" var="item">
            <div>
                <aura:if isTrue="{!or(or(item.type == 'text', item.type == 'password'), item.type == 'email')}">
                    <c.Child existingAttribute="{!item.existing}" newAttribute="{!item.new}" />
                <aura:if/>
            </div>
        </aura:iteration>
    </form>
</div>

The component can be saved again if I remove the newAttribute attribute.

From my viewpoint - there is no errors in terms of formatting or setting up the aura:attribute - and it should work.

And the interesting thing about this - is that the <c.Child /> component line will work if it has a higher level in the depth of the code - it doesn't seem to want to work if it's nested five levels deep...

<!--Parent.cmp-->
<!-- Works -->
<div>
    <!-- Works -->
    <form>
        <!-- Works -->
        <aura:iteration items="{!v.items}" var="item">
            <!-- Works -->
            <div>
                <!-- Doesn't Work -->
                <aura:if isTrue="{!or(or(item.type == 'text', item.type == 'password'), item.type == 'email')}">
                    <!-- Doesn't Work -->
                <aura:if/>
            </div>
        </aura:iteration>
    </form>
</div>

Am I missing something? Is this a bug? How would I solve this?

Any help would be massively appreciated.

Answer 1

c.Child is the incorrect component name, it should be c:Child. The reason why is because of XML and how names are defined. The <x:y> syntax means "the component y in the namespace x," while <x.y> means "the component x.y in the default namespace." As you can hopefully see, these are two different definitions, and should yield different results.

If we look at the naming rules, we find that names:

• Must begin with a letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores

As you can see, you're technically trying to refer to a component by the wrong name. I'm honestly quite surprised it ever compiled for any reason. I'd log that as a bug, perhaps. Components must always be referenced to by <namespace:name> Under no circumstances are . allowed in any component name or attribute.

You'll also probably want to read more about namespaces.