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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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" />

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0