[SalesForce] Error “error in ‘markup://aura:iteration’ : Cannot read property ‘childNodes’ of null” reported when a component is nested inside aura:iteration

My problem is similar to this question. The following markup ends up with the 'Cannot read property 'childNodes…' error unless I remove the component inside the aura:iteration and replace it with something inline. Unfortunately, I can't do that because I need the sub component to call a function when an item in the list is selected. The c:productListItem component can be very simple and the error still occurs; I reduced it down to some static text inside a span.

<aura:iteration items="{!v.objectsFound}" var="item">
    <!-- when I use the following line and comment out the c:ProductListItem, the error goes away -->
    <!-- span>{!item.Name}</span -->
    <c:ProductListItem product="{!item}"/>
</aura:iteration>

Best Answer

The problem was that I was including the SLDS CSS both in the parent and sub component. When I removed the ltng:require tag from the c:ProductListItem component, it worked fine. On this help page for ltng:require, it says:

To ensure encapsulation and reusability, add the tag to every .cmp or .app resource that uses the CSS or JavaScript library.

...but in this case, my app breaks if I do that.

In case it's relevant, here is the full line for my ltng:require element:

<ltng:require styles="/resource/SLDS092/assets/styles/salesforce-lightning-design-system-ltng.css" />
Related Topic