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

Closed
vadger opened this Issue Mar 5, 2016 · 11 comments

Projects

None yet

7 participants

@vadger
vadger commented Mar 5, 2016

Hello,

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

Here is example:

http://plnkr.co/edit/QV7nnJKbcghfGdQkmj1X?p=preview

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?

http://plnkr.co/edit/QV7nnJKbcghfGdQkmj1X?p=preview

  1. On which browser OS the problem appears?

At least osx with chrome

  1. Which riot version are you using?

2.3.16

  1. How would you tag this issue?

    Bug

@crisward
Member

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

@crisward
Member

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

@lukeed
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>
</div>

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
lukeed commented May 30, 2016

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

<input />

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

...will also trigger the same error.

@Mariick
Mariick commented Jun 4, 2016 edited

+1
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
root.insertBefore(frag,ref);
by

if(ref.nextSibling == null && ref.previousSibling == null)
            root.appendChild(frag);
        else
            root.insertBefore(frag,ref);

and it work in all cases

@Mariick
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.

@GianlucaGuarini
Member

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

@GianlucaGuarini GianlucaGuarini self-assigned this Jun 7, 2016
@andreaslangsays

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

@Mariick
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, ...)

@MartinMuzatko
Member

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

@lukeed
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
Merged

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