leptos-rs/leptos · info

[HOT RELOADING] Building children, encountered

Error message

[HOT RELOADING] Building children, encountered

What it means

While walking the DOM to build the child model used for patching, buildActualChildren encountered a node whose type it does not handle (only ELEMENT, TEXT, and the known COMMENT markers are supported). The node is skipped (not added to actualChildren), which can shift child indexes and cause subsequent patches to target the wrong element or fail path resolution.

Source

Thrown at leptos_hot_reload/src/patch.js:430

            if (walker.currentNode.textContent.trim() == endMarker) {
              depth--;
            } else if (walker.currentNode.textContent.trim() == componentName) {
              depth++;
            }

            if (depth == 0) {
              break;
            }
          }
          let end = walker.currentNode;
          actualChildren.push({
            type: "component",
            start,
            end,
          });
        }
      } else {
        console.warn(
          "[HOT RELOADING] Building children, encountered",
          walker.currentNode,
        );
      }
    }
    return actualChildren;
  }

  function childAtPath(element, path) {
    if (path.length == 0) {
      return element;
    } else if (element.children) {
      const next = element.children[path[0]],
        rest = path.slice(1);
      return childAtPath(next, rest);
    } else if (path == [0]) {
      return element;
    } else if (element.start && element.end) {

View on GitHub (pinned to 32d20f6c9d)

Solutions

1. Inspect the logged walker.currentNode to identify the unexpected comment and its source.
2. Disable browser extensions or scripts that inject comments into app DOM during development.
3. Extend buildActualChildren's comment handling if your tooling legitimately emits its own markers.
4. Keep patched subtrees free of foreign nodes (wrap third-party widgets in components with markers).

// Check for foreign comments inside a component's DOM before relying on hot reload:
const foreign = [...container.childNodes]
  .filter(n => n.nodeType === Node.COMMENT_NODE &&
    !n.textContent.trim().startsWith('hot-reload|') &&
    !['<() />', '<DynChild>', '<>', '</>'].includes(n.textContent.trim()));
if (foreign.length) console.warn('foreign comment nodes present', foreign);

function isRecognizedMarker(comment) {
  const t = comment.textContent.trim();
  return t.startsWith('hot-reload|') || t === '<() />' ||
    t === '<DynChild>' || t === '</DynChild>' || t === '<>' || t === '</>' ||
    /^<[^/].*>$/.test(t);
}

When it happens

Trigger: A comment node whose textContent is not a recognized marker (hot-reload|*, <() />, <DynChild>, <>, or a `<Component>` style marker) appears as a direct child inside a patched range — e.g. framework-internal comments, conditional comments, or comments injected by extensions/other tooling.

Common situations: Third-party scripts or browser extensions injecting comment nodes; mixing leptos hot-reload markers with other leptos debug comments; SSR/hydration leftovers inside the patch range.

Related errors

• InsertChildAfter could not build children.
• [HOT RELOADING] Unmatched action
• [HOT RELOADING] Could not find replacement node at
• {location:?} expected context of type {type_name:?} to be pr
• Tried to access a reactive value that has already been dispo

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