{"record":{"id":"981f45983b5a98d9","repo":"leptos-rs/leptos","slug":"insertchildafter-could-not-build-children","errorCode":null,"errorMessage":"InsertChildAfter could not build children.","messagePattern":"InsertChildAfter could not build children\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"leptos_hot_reload/src/patch.js","lineNumber":152,"sourceCode":"            } else {\n              toRemoveNode.parentNode.removeChild(toRemoveNode);\n            }\n          } else if (action.InsertChild) {\n            const newChild = fromReplacementNode(\n              action.InsertChild.child,\n              actualChildren,\n            );\n            let children = [];\n            if (child.children) {\n              children = child.children;\n            } else if (child.start && child.end) {\n              children = childrenFromRange(\n                child.node || child.start.parentElement,\n                start,\n                end,\n              );\n            } else {\n              console.warn(\"InsertChildAfter could not build children.\");\n            }\n            const beforeNode = children[action.InsertChild.before];\n            console.log(\n              \"[HOT RELOAD] > InsertChild\",\n              child,\n              child.node,\n              action.InsertChild,\n              \" before \",\n              beforeNode,\n            );\n            if (beforeNode) {\n              let node = beforeNode.node || beforeNode.start.previousSibling;\n              node.parentElement.insertBefore(newChild, node);\n            } else if (child.node) {\n              child.node.appendChild(newChild);\n            } else if (children) {\n              let lastNode = children[children.length - 1];\n              let afterNode = lastNode.node || lastNode.end.nextSibling;","sourceCodeStart":134,"sourceCodeEnd":170,"githubUrl":"https://github.com/leptos-rs/leptos/blob/32d20f6c9d517451d77beb68d88c7716823dac41/leptos_hot_reload/src/patch.js#L134-L170","documentation":"During an InsertChild hot-reload patch, patch.js could not reconstruct the list of actual DOM children of the target child. It falls back to an empty array, so the patch's 'before' index lookup yields undefined and the new child may be appended at a wrong position or not inserted at all. This is a console.warn emitted by leptos_hot_reload's client-side patcher, not a thrown exception.","triggerScenarios":"A patch with action.InsertChild arrives whose resolved child (via childAtPath) has neither a `children` array nor both `start` and `end` markers — e.g. the path resolved to an 'element' or 'text' child rebuilt from a stale DOM snapshot after earlier patches already mutated the DOM.","commonSituations":"Editing a component so it inserts a new element into a plain element/text slot; hot-reload cycles where earlier ReplaceWith/RemoveChild patches invalidated comment-marker ranges; DOM edited manually in devtools between reloads so markers no longer line up.","solutions":["Do a full browser reload to resynchronize the DOM markers, then re-apply the edit.","Avoid stacking structural edits (insert/remove/replace) that change child indexes within one component between reloads.","Ensure the target child is wrapped in component/fragment markers (hot-reload comment markers) so its children can be rebuilt from a range.","Check the leptos version pair (server-side Diff vs patch.js) is matched; mismatched patch schemas produce paths that resolve to the wrong child."],"exampleFix":"// Not a code fix; recovery in dev workflow:\n// before: multiple incremental edits while hot reload degrades DOM markers\n// after: hard reload the page once markers are out of sync, then edit","handlingStrategy":"validation","validationCode":"// Before relying on rebuilt children in a custom patch handler:\nfunction canBuildChildren(child) {\n  return Boolean(child && (Array.isArray(child.children) || (child.start && child.end)));\n}\nif (!canBuildChildren(child)) { fullReload(); }","typeGuard":"function hasEnumerableChildren(child) {\n  return Array.isArray(child.children) ||\n    (child && typeof child.start === 'object' && typeof child.end === 'object');\n}","tryCatchPattern":null,"preventionTips":["Hard-reload whenever the console shows marker/children warnings — state is already desynced.","Limit structural edits between reloads to one change per subtree.","Keep dynamic content inside marked components/fragments so ranges are rebuildable."],"tags":["hot-reload","dom-patching","leptos"],"backgroundTag":"hot-reload-dom-marker-desync","analyzedSha":"32d20f6c9d517451d77beb68d88c7716823dac41","analyzedAt":"2026-09-01T18:55:42.580Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T01:17:15.007Z"}