DOM update bug?

[justintaddei]

I have been trying to recreate a bug(?) which causes a DOMException to throw.

The codebase surrounding the issue is rather large and hard to follow. I believe the process leading up to the error is similar to this pen: codepen.io

I have tried very hard to recreate the problem without success. I apologize that I cannot provide any further detail. This is my last ditch resort to figure out what is causing this. Perhaps you have encountered a similar snag in the past that would shed some light on the situation?

The exception and a screenshot of devtools:

Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

[WebReflection]

most likely same item is present twice in the list, so you might want to use the ID in per each item

async function render() {
  await boring();

  return body`${
  hyperHTML.wire(list, ':ul')`
  <ul>
  ${list.map((item, i) => hyperHTML.wire(item, ':li-' + i)`
  <li>Number: ${item.number}</li>
  `)}
  </ul>
  `
  }`;
}

this would grant that per each item, at specific position, you'll have only on e Dom node.

However, this also means one item could have duplicated nodes associated.

Other common cause of troubles are 3rd parts libraries that move nodes around, or, in case the same list is used in other renders, you need to use an ID, even without index, so you have a unique item per container.

async function render() {
  await boring();

  return body`${
  hyperHTML.wire(list, ':ul')`
  <ul>
  ${list.map((item, i) => /* here */ hyperHTML.wire(item, ':li')`
  <li>Number: ${item.number}</li>
  `)}
  </ul>
  `
  }`;
}

Unless I am able to reproduce the issue though, and this would eventually be a domdiff issue, not an hyperHTML one, I think I can close this since there's no action for me to take.

[justintaddei]

This sounds like it is most likely an issue with my code. Your first proposal seems most plausible in my scenario. Thank you for providing insight into what may have caused this.