`for:each` within `for:each` without explicit `key` can lead to vdom errors

[nolanlawson]

(Salesforce Known Issue)

If you have an iteration (for:each) within another iteration:

<template>
    <template for:each={children} for:item="child">
        <x-row lwc:if={child.renderMe} prop={child} key={child.id}></x-row>
        <template lwc:if={child.children} for:each={child.children} for:item="grandchild">
            <x-row lwc:if={grandchild.renderMe} prop={grandchild} key={grandchild.id}></x-row>
        </template>
    </template>
</template>

... and if you have a sufficient number of lwc:if layers and duplicated keys between the grandchildren and the children, then you can get a runtime error:

TypeError: Cannot use 'in' operator to search for 'prop' in undefined

Thrown by:

lwc/packages/@lwc/engine-core/src/framework/modules/props.ts

Line 62 in 666e8fe

if (!(key in elm!)) {

Or:

TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.

Thrown by:

lwc/packages/@lwc/engine-dom/src/apis/create-element.ts

Line 76 in 666e8fe

const removedNode = removeChild.call(this, oldChild);

One workaround is to put a key around the inner loop:

 <template>
     <template for:each={children} for:item="child">
         <x-row lwc:if={child.renderMe} prop={child} key={child.id}></x-row>
+        <div key={child.id}>
         <template lwc:if={child.children} for:each={child.children} for:item="grandchild">
             <x-row lwc:if={grandchild.renderMe} prop={grandchild} key={grandchild.id}></x-row>
         </template>
+        </div>
     </template>
 </template>

Another workaround is to flatten the array. E.g.:

get flattenedArray() {
  return this.children.map(child => [child, ...child.children]).flat() // something like this
}

... and then use a single for:each:

<template for:each={flattenedArray} for:item="child">
    <!-- ... --->
</template>

Repro for first error: nolanlawson/lwc-barebone@836362a
Repro for second error: nolanlawson/lwc-barebone@a97223c

Repro steps: pnpm i && pnpm run dev

[git2gus]

This issue has been linked to a new work item: W-17266520

[nolanlawson]

Potential fix: we could use a VFragment for for:each. This may help the vdom diffing to distinguish between different for:each blocks.

[nolanlawson]

Interestingly, my attempt to use a VFragment did not resolve the issue, and caused 4 other test failures in the Karma tests.

The issue here seems to be that we land in this code path but the elm on both the n1 and n2 are undefined:

lwc/packages/@lwc/engine-core/src/framework/rendering.ts

Lines 393 to 395 in 5d1837b

	// Otherwise patch the existing component with new props/attrs/etc.
	const elm = (n2.elm = n1.elm!);
	const vm = (n2.vm = n1.vm);