1

I am getting an error :

This page has an error. You might just need to refresh it. rerender threw an error in 'markup://aura:expression' [Cannot read property 'childNodes' of null] Failing descriptor: {markup://aura:expression}

Keeping any specific code aside, I want to know what salesforce means by this statement. What is 'childnodes' property? And in general what should we look into the code while debugging such problem? In earlier answers to this type of error, I found that there was some markup issue like aura:iteration or aura:renderIf, but is anything concrete we can look when these errors come?

1 Answer 1

3

To understand what's happening, you need to know quite a bit about the DOM (Document Object Model) and basic JavaScript. Consider the following HTML:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

In this example, if you wrote the following JavaScript:

for(var i = 0; i < document.querySelector('ul').childNodes.length; i++) {
  // Do something
}

You'd iterate over each of the three li items in the ul element.

However, if document.querySelector couldn't find a specific element, you'd have an "undefined" value, and so you'd get an error like "cannot read property childNodes of undefined."

Basically, that's what's going on here. Aura is trying to find a specific element, but doesn't, so when it tries to access its children, it causes this error to happen.

There's a few well-known cases where this occurs, such as nested aura:if tags, which you may want to search here on SFSE and read more about them.

Since any sort of error involving childNodes is almost certainly an Aura bug, you should try and report those on the Aura open source project, preferably with easy to reproduce code samples.

As for debugging the situation, this usually involves isolating the offending element, and then working your way from here. What I typically do when I run into a bug is start by clearing out the component:

<aura:component>
</aura:component>

After it saves okay and I test it, I then add in some more code:

<aura:component>
  <aura:attribute name="records" type="Account[]" />
</aura:component>

If this runs without an error, I keep adding more code:

<aura:component>
  <aura:attribute name="records" type="Account[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
</aura:component>

<aura:component>
  <aura:attribute name="records" type="Account[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:if isTrue="{!v.records.size}">
  </aura:if>
</aura:component>

<aura:component>
  <aura:attribute name="records" type="Account[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <aura:if isTrue="{!v.records.size}">
    <aura:iteration items="{!v.records}" var="record">
    </aura:iteration>
  </aura:if>
</aura:component>

Eventually, you'll get to a point where the error will reappear. This lets you know where the problem lies. Other debugging techniques also work to an extent, but it can be really hard to identify the cause until you first know where the problem is originating from.

Once you know which line is at fault, you can get down to the real work. Usually, I have to resort to reading the manual. Make sure that all required elements are in place. Also make sure you've reviewed the known issues for the framework.

If you're using a modern browser, your F12 tools (Firefox, Chrome, and IE all have this) will probably give you a stack trace to more information regarding the error. At this point, you could look at the open source project to track down what's going on, or you could try to devise a workaround.

One common workaround is to include an extra element inbetween possibly offending elements. For example, the aura:if bug happens when you do something like this:

<aura:if isTrue="{!v.value1}">
  <aura:if isTrue="{!v.value2}">
  </aura:if>
</aura:if>

The solution is to add a span tag:

<aura:if isTrue="{!v.value1}">
  <span>
    <aura:if isTrue="{!v.value2}">
    </aura:if>
  </span>
</aura:if>

Often times, you may not be able to figure out the exact cause. That's why SFSE exists; it gives you access to more experienced developers and even internal salesforce.com developers that can often pinpoint an exact problem for you. This is good for you, and good for Salesforce, too; after all, the developers can't fix a problem they don't know about.


In summary:

Check the documentation, and include all required attributes.

Try adding and removing elements to cause the error to go away.

Create a reproduction and ask here on SFSE, and/or log an Issue on GitHub.

4
  • thatnks for elaborate answer, I'll definely note all these points. I have an additional query about you saying to add the <span> tag.I've heard this a lot times on SFSE. What is the concept behind this in SFDC, that merely adding a span tag will resolve these issues?
    – Sarang
    Feb 9, 2017 at 12:24
  • 1
    @Sarang The reason is pretty technical. What happens is aura:if uses HTML comments to remember where non-rendered elements are. When there's no intervening element between two aura:if statements, these comments collapse into a single comment, which causes Aura to freak out. Having a span between each if causes the comments to not collapse, and everything works. Many of the glitches you find regarding childNodes are of a similar nature, some sort of unforeseen bug in the platform.
    – sfdcfox
    Feb 9, 2017 at 12:28
  • My code which was having this issue, I get it resolved inspired from your above comment, though I did not put the <span> or <div> in between 2 aura:if, and also there was no aura:if in my cose, I enclosed all my '<div>s' in markup inside <article></article> . And this surprisingly resolved it. This enclosing thing had previously worked for me as well. Will your above explanation be applied in this case as well? Or enclosing some thing has any different impacts on DOM elements and platform?
    – Sarang
    Feb 9, 2017 at 12:40
  • 1
    @Sarang Simply enclosing an element changes the DOM, which basically resolves the error. If you look at the source of your page while it's running, you'll see that aura uses several different attributes and elements, like "aura-rendered-by" (or something like that). The framework has a few DOM manipulation issues, so usually just giving it an extra layer in the DOM can help fix things.
    – sfdcfox
    Feb 9, 2017 at 12:45

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.