Need help with "Failed to execute 'insertBefore' on 'Node'" errors.

[EverettMcKay]

Hi,

I'm getting a "Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node." error, and as a result my app isn't rendering correctly. Of course, my app doesn't have any insertBefore calls, so I assume this is coming from the Mithril difference engine.

A few questions:

1. What is the cause of this error? The problem has apparently come up many times before, but I'm not quite following the prior discussions. Is there a list of top causes?
2. Is there a way to narrow down the specific cause? Both the error message line number and call stack are pretty useless here. An error message pops up in the console, but it appears to be displayed asynchronously, so I can't seem to get the error to display while stepping through in the debugger.
3. What is the work around? I tried to make sure my keys are unique, but that has got me nowhere. Aside from keys, is there any other common solution?

Since I don't know that the exact problem, I can't narrow it down enough to give code samples. Generally, what I am doing is presenting a list of svg icons (think star ratings) and updating their color and icon type (empty, filled in) based on the current state. Oddly, if I hardwire their color and type, the problem goes away. So the problem only happens when I update their presentation dynamically based on clicking.

Forcing a refresh results in the component drawing correctly. I had hoped that calling m.redraw() might fix the problems by redrawing the icons, but no luck there.

Finally, in the past I have been able to get problems like this to go away with either calling redraw or changing the keys. Neither solution appears to work in this case.

[EverettMcKay]

I think I just got lucky. The problem seems to be with one of the svg icons. This works:

  <svg viewBox="0 0 48 48">
    <path
     d="M24,3.35l6.82,12.92.23.43.48.09L46,19.26,35.69,29.7l-.35.35.07.49,2.12,14.52L24.44,38.6,24,38.38l-.44.22L10.47,45.06l2.12-14.52.07-.49-.35-.35L2.06,19.27l14.4-2.38.49-.08.24-.45L24,3.35M24,1.2,16.3,15.9,0,18.6,11.6,30.4,9.2,46.8,24,39.5l14.8,7.3L36.4,30.4,48,18.6,31.7,15.8,24,1.2Z"
      style="fill:#000"
    />
  </svg>,

But this doesn't:

  <svg viewBox="0 0 48 48">
    <polygon points="48 17.4 31.7 14.6 24 0 16.3 14.6 0 17.4 11.6 29.2 9.2 45.6 24 38.3 38.8 45.6 36.4 29.2 48 17.4" style="fill-rule:evenodd" />
    <polygon points="24 34.6 13.3 39.9 15.1 28.1 6.8 19.6 18.5 17.6 24 7.1 29.5 17.6 41.2 19.6 32.9 28.1 34.6 39.9 24 34.6" style="fill:#fff;fill-rule:evenodd" />
    <path
    d="M24,3.35l6.82,12.92.23.43.48.09L46,19.26,35.69,29.7l-.35.35.07.49,2.12,14.52L24.44,38.6,24,38.38l-.44.22L10.47,45.06l2.12-14.52.07-.49-.35-.35L2.06,19.27l14.4-2.38.49-.08.24-.45L24,3.35M24,1.2,16.3,15.9,0,18.6,11.6,30.4,9.2,46.8,24,39.5l14.8,7.3L36.4,30.4,48,18.6,31.7,15.8,24,1.2Z"
      style="fill:#000"
    />
  </svg>,

Suspecting the polygon tag. If so, would be great to issue a run-time warning instead of an insertBefore error.

[pygy]

As in the other issue, we could help you better if you provided us a repro.

The error message makes me thing that something other that Mithril modifies with the DOM, resulting in problems when updating.

[EverettMcKay]

After a long delay, I was planning on building a test program to illustrate this problem, but the problem resurfaced again this week big time, making my app inoperable. So, I had to look at it again and got lucky.

First, here is what is logged when the problem is happening (you will see many of these):

  mount-redraw.js:13 NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  at removeDOM (render.js:650:1)
  at removeNode (render.js:612:1)
  at updateNodes (render.js:296:1)
  at updateElement (render.js:458:1)
  at updateNode (render.js:411:1)
  at updateComponent (render.js:468:1)
  at updateNode (render.js:414:1)
  at updateNodes (render.js:297:1)
  at updateElement (render.js:458:1)
  at updateNode (render.js:411:1)

There were actually two problems related to handling svgs dynamically:

1. Dynamically changed svgs need a key attribute directly on the svg tag itself.

My app has the ability to let users select icons, which was getting messed up with a mixture of old and new, but only when the icons were svgs.

Before, I had a key (based on the state, which determined the icon) on a parent div. I changed that to putting a key directly on the svg (based on the icon). For whatever reason, I didn’t try keys directly on the svgs before.

2. Dynamically changing the number of svgs requires any previous svgs to be cleared before the new icons are rendered.

A common situation might be to change the number of icons from 10 to 7 (or any other combination.) The old icons (8 – 10) would often still be displayed after the change in though they were removed from the virtual dom.

To clear these out, I temporarily replace all existing icons with blanks, then draw the new ones. This results in a flash but otherwise works as expected.

Recommendations:

It would be great if we could:

1. document that dynamic svgs need key attributes directly on them. If you have an array of the same icons (as with a star rating), the key needs to have the index encoded too.
2. Detect changes in the number of svgs icons within a fragment, and mithril could clear them out before rerendering.
3. Prevent the “NotFoundError: Failed to execute 'removeChild' on 'Node':” error somehow, and log with a warning with a link instead.

A happy ending. Thank you for your patience.