Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. #1649

vadger opened this Issue Mar 5, 2016 · 11 comments


None yet

7 participants

vadger commented Mar 5, 2016


While playing with more complex exmaple I got the js error.

Here is example:


In short here is some kind of notifications configuration form. Depending on notification type it may have whether simple structure or complex (int the example not fully implemented). So for managing different notification types there are 2 tags: notification-simple and notification-account-based. To decide which tag should be applied I use following construction:

<notification-simple each="{ items }" data="{ this }" if={ !this.accountBased }></notification-simple> <notification-account-based each="{ items }" data="{ this }" if={ this.accountBased }></notification-account-based>

When I'm trying to delete other than last row (see example) I'm getting the error. However, despite the error works ok. When I'm deleting from the end - one by one - there is no error. Moreover, if I delete this row:

<notification-account-based each="{ items }" data="{ this }" if={ this.accountBased }></notification-account-based>

everything works without error.

What is more interesting in version 2.3.12 there is no error. Starting with 2.3.13 error exists.

  1. Can you reproduce the issue in a simple example?


  1. On which browser OS the problem appears?

At least osx with chrome

  1. Which riot version are you using?


  1. How would you tag this issue?



I also have this problem, any ideas on work arounds?


Just to answer my own question, adding 'no-reorder' attribute to the tag with each seems to fix it.

lukeed commented May 30, 2016 edited

Received this same error, and it happens with and without the no-reorder attribute.

For me, it's throw as soon as any sibling-level event handler is triggered. In my case, an onkeyup listener, even though it's outside the loop.

<input onkeyup="{ onType }" />

<div each="{ items }"> <!-- re-order doesnt matter -->
  <p>{ title }</p>

self.onType = function () {
  console.log('as soon as i type / invoke this listener, the error throws');
  console.log('happens with ANY event listener, click, keydown, ...')
lukeed commented May 30, 2016

It also does not need to be an immediate sibling, as depicted above.

<input />

        <li each="{ items }"></li>

...will also trigger the same error.

Mariick commented Jun 4, 2016 edited

I confirm that i also have this issue, with Riot <= 2.3.12 no problem, but starting from 2.3.13 the issue is present.
I found that it worked with Riot <= 2.3.12 because the node is inserted with "appendChild" and not "insertBefore" (in fact the nextSibling and previousSibling property of the ref object is null).
Thus i changed on Riot 2.4.1 (riot+compiler.js) at line 1303

if(ref.nextSibling == null && ref.previousSibling == null)

and it work in all cases

Mariick commented Jun 7, 2016

Even with the workaround (it add order issues) there is again errors related to 'NotFoundError: Failed to execute 'insertBefore'...' on line 1235 of 'riot+compiler.js' 2.4.1

It's impossible to use RiotJS > 2.3.12 when you have a configuration like @vadger explained or when for example you want to use the library Jquery 'DataTables' (table customization) with a table rendered by Riot's tag.


I will work on this issue really soon making a new patch release hold on guys

@GianlucaGuarini GianlucaGuarini self-assigned this Jun 7, 2016

This Bug also appeared in my project using Riot v2.5.0 when it comes to inject update data from an xhr request.

Mariick commented Jul 12, 2016 edited

The only workaround (very very ugly -_-") i found fo fix this issue is to hide by default the element rendered by Riot (display:none), and at each 'updated' event, duplicate the element (deep clone + handler copy (onclick, ...)) paste along the original element and make it visible.

Then use your custom JS/JQuery modification to this duplicated element... this slowdown the app i build with Riot but its the only working way i found...

I noticed that this issue appear often when you try to alter (deep) an element rendered by Riot with something other than riot (Jquery, ...)


Having a similar issue, thought it was part of using no-reorder?

lukeed commented Jul 12, 2016

Nope. I've duplicated it a few times, both with and without no-reorder.

@rsbondi rsbondi added a commit that referenced this issue Jul 23, 2016
@rsbondi rsbondi added test for #1649 fix c86198e
@rsbondi rsbondi referenced this issue Jul 28, 2016

closes #1649 #1883

@GianlucaGuarini GianlucaGuarini added a commit that closed this issue Aug 20, 2016
@GianlucaGuarini GianlucaGuarini closes #1649 1ee2e07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment