Error: Failed to execute 'insertBefore' on 'Node':

[rajeshsegu]

We are using preact 6.4.0

Error: Failed to execute 'insertBefore' on 'Node': The new child element contains the parent.
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 180
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 93
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 36
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 149
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 133
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 211

The child element is trying to replace the parent with a new element. Any thoughts on what could trigger such a case ?

Example Scenario:

<Container>
   <ContainerItem>
      <svg></svg>
     < div >name</ div >
   </ContainerItem>
</Container>

This is what is happening in renderComponent class....

<ContainerItem>.replaceChild(<Container>, <svg>);

Any pointers to debug / fix this is much appreciated.

[rajeshsegu]

Similarly we are also seeing

Error: The operation would yield an incorrect node tree.
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 156
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 133
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 231
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 184
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 100
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 184
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 100
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 38
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 149
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 216
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 184
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 100
./node_modules/preact/src/vdom/diff.js in null.<anonymous> at line 38
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 149
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 45
./node_modules/preact/src/vdom/component.js in null.<anonymous> at line 123
./node_modules/preact/src/render-queue.js in null.<anonymous> at line 21

Happens around

if (baseParent && base!==baseParent) {
                baseParent.replaceChild(base, initialBase);

[developit]

Hmm - this is very odd. That's a common pattern that's fairly widely used. One question though: you're passing two children to ContainerItem - is it trying to return an Array? Might be way off track, just it seemed odd.

[rajeshsegu]

Container and ContainerItem are actually div's, its just the component names that renders, wanted to give an idea on the structure it returns like.

 <div class=component>
    items.map(i => (
        <div class=component-item key=i.id>
           {i.icon}
          <div>{i.name}</div>
        </div>
   ));
 </div>

[developit]

That makes sense.
Any chance it still happens without the keys?

[developit]

Hoping this is fixed in 7.1.0 (out very shortly)

[robertknight]

Hello @rajeshsegu can you confirm whether preact v7.x fixes this problem for you?

[developit]

Fixed in 8!