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

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" />
| improve this answer | |

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.