I am getting error Too many components for aura://ComponentController.getComponent
in my Lightning app.
I've seen the related question here:
Lightning/Aura Components: Too many components for aura
But I don't have more than 10,000 components in my app, or at least I don't believe I do. Also, the error only occurs intermittently.
I can make a particular server side call that gets a list of data, set the attribute for that list and let the rerender happen. Sometimes it will render fine, sometimes loading the same data the error will happen.
Also, so far the issue is only happening on one of the three Salesforce orgs I'm testing on.
Is there something I could be doing that is somehow leaking components ?
Is there some way I can trace how many component instances there are at any one time ?
What counts as a component within the 10,000 limit ? Is it just aura:component
items as defined in our own .cmp
files or do things like aura:iteration
and aura:if
within our components count towards the limit ?
Update:
The component that the problem occurs in renders a table that displays office hours for contacts (with 15 minute granularity). Within the component, while iterating over a list that contains the office hours for each day for a contact does:
<aura:iteration items="{!contactWrapper.Days}" var="day">
<aura:iteration items="{!day.Hours}" var="hourData">
<td scope="col" class="officeDivider">
</td>
<td class="{!hourData[0]}">
<span class="slds-truncate"></span>
</td>
<td class="{!hourData[1]}">
<span class="slds-truncate"></span>
</td>
<td class="{!hourData[2]}">
<span class="slds-truncate"></span>
</td>
<td class="{!hourData[3]}">
<span class="slds-truncate"></span>
</td>
</aura:iteration>
</aura:iteration>
The office hours cover the period 6am-10pm, over 5 days, so the internal bit of those nested aura:iteration
gets rendered 75 times for each contact in the list.
If I comment out that inner aura:iteration
the error goes away, but of course the data isn't rendered. I thought I'd be clever and upwrap the inner iteration. So I replaced it with:
<td scope="col" class="officeDivider">
</td>
<td class="{!day.Hours[0][0]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[0][1]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[0][2]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[0][3]}">
<span class="slds-truncate"></span>
</td>
all the way through to (one chunk like this for each hour):
<td scope="col" class="officeDivider">
</td>
<td class="{!day.Hours[15][0]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[15][1]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[15][2]}">
<span class="slds-truncate"></span>
</td>
<td class="{!day.Hours[15][3]}">
<span class="slds-truncate"></span>
</td>
So I've removed those 75 instances of that inner aura:iteration
completely. Problem solved, right ?
No, the error still occurs. If I comment out most of the unrolled bits, so I just show a couple of hours, the error goes away.
Does that mean that the expressions in the class
attributes are somehow counting towards the limit ? (I can't see how they could be, is if they were I'd be over the limit all the time loading this data)