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.