leptos-rs/leptos · warning

InsertChildAfter could not build children.

Error message

InsertChildAfter could not build children.

What it means

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.

Source

Thrown at leptos_hot_reload/src/patch.js:152

            } else {
              toRemoveNode.parentNode.removeChild(toRemoveNode);
            }
          } else if (action.InsertChild) {
            const newChild = fromReplacementNode(
              action.InsertChild.child,
              actualChildren,
            );
            let children = [];
            if (child.children) {
              children = child.children;
            } else if (child.start && child.end) {
              children = childrenFromRange(
                child.node || child.start.parentElement,
                start,
                end,
              );
            } else {
              console.warn("InsertChildAfter could not build children.");
            }
            const beforeNode = children[action.InsertChild.before];
            console.log(
              "[HOT RELOAD] > InsertChild",
              child,
              child.node,
              action.InsertChild,
              " before ",
              beforeNode,
            );
            if (beforeNode) {
              let node = beforeNode.node || beforeNode.start.previousSibling;
              node.parentElement.insertBefore(newChild, node);
            } else if (child.node) {
              child.node.appendChild(newChild);
            } else if (children) {
              let lastNode = children[children.length - 1];
              let afterNode = lastNode.node || lastNode.end.nextSibling;

View on GitHub (pinned to 32d20f6c9d)

Solutions

  1. Do a full browser reload to resynchronize the DOM markers, then re-apply the edit.
  2. Avoid stacking structural edits (insert/remove/replace) that change child indexes within one component between reloads.
  3. Ensure the target child is wrapped in component/fragment markers (hot-reload comment markers) so its children can be rebuilt from a range.
  4. Check the leptos version pair (server-side Diff vs patch.js) is matched; mismatched patch schemas produce paths that resolve to the wrong child.

Example fix

// Not a code fix; recovery in dev workflow:
// before: multiple incremental edits while hot reload degrades DOM markers
// after: hard reload the page once markers are out of sync, then edit
Defensive patterns

Strategy: validation

Validate before calling

// Before relying on rebuilt children in a custom patch handler:
function canBuildChildren(child) {
  return Boolean(child && (Array.isArray(child.children) || (child.start && child.end)));
}
if (!canBuildChildren(child)) { fullReload(); }

Type guard

function hasEnumerableChildren(child) {
  return Array.isArray(child.children) ||
    (child && typeof child.start === 'object' && typeof child.end === 'object');
}

Prevention

When it happens

Trigger: 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.

Common situations: 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.

Related errors

AI-assisted analysis of leptos-rs/leptos@32d20f6c9d (2026-09-01). Data as JSON: /api/errors/981f45983b5a98d9. Report an issue: GitHub.