What causes "[HOT RELOADING] Error: " in leptos-rs/leptos?

Read the logged error object `e` in the console to find the actual failing operation.

[HOT RELOADING] Error:

Error message

[HOT RELOADING] Error:

What it means

The outer try/catch of patch(json) caught any exception thrown while applying a hot-reload patch batch (JSON parse failure, null dereference on child.node, missing DOM nodes, etc.) and logs it as a warning. The whole patch batch for that view is aborted mid-way, leaving the DOM partially patched until a full reload.

Source

Thrown at leptos_hot_reload/src/patch.js:224

              const parent =
                node.nodeType === Node.COMMENT_NODE ? node.parentNode : node;
              if (!after) {
                parent.appendChild(newChild);
              } else {
                parent.insertBefore(
                  newChild,
                  (after.node || after.start).nextSibling,
                );
              }
            }
          } else {
            console.warn("[HOT RELOADING] Unmatched action", action);
          }
        }
      }
    }
  } catch (e) {
    console.warn("[HOT RELOADING] Error: ", e);
  }

  function fromReplacementNode(node, actualChildren) {
    if (node.Html) {
      return fromHTML(node.Html);
    } else if (node.Fragment) {
      const frag = document.createDocumentFragment();
      for (const child of node.Fragment) {
        frag.appendChild(fromReplacementNode(child, actualChildren));
      }
      return frag;
    } else if (node.Element) {
      const element = document.createElement(node.Element.name);
      for (const [name, value] of node.Element.attrs) {
        element.setAttribute(name, value);
      }
      for (const child of node.Element.children) {
        element.appendChild(fromReplacementNode(child, actualChildren));

View on GitHub (pinned to 32d20f6c9d)

Solutions

Read the logged error object `e` in the console to find the actual failing operation.
Hard-reload the page; partial patches cannot be rolled back automatically.
Validate the incoming JSON payload (log it — patch already prints '[HOT RELOAD]' with the parsed views).
Guard handlers against undefined children before dereferencing `.node` (see ReplaceWith/RemoveChild paths).

Example fix

// before (fragile)
const toRemove = child.children[action.RemoveChild.at];
let toRemoveNode = toRemove.node;
// after
const toRemove = child.children && child.children[action.RemoveChild.at];
if (!toRemove) { console.warn("missing child", action); return; }
let toRemoveNode = toRemove.node;

Defensive patterns

Strategy: try-catch

Validate before calling

// Validate payload before calling patch:
try { JSON.parse(json); } catch (e) { console.warn('bad hot-reload payload', e); return; }

Try / catch

try {
  patch(json);
} catch (e) {
  console.warn('[HOT RELOADING] Error: ', e);
  location.reload(); // partial patch state is unrecoverable
}

Prevention

Reload the page on any '[HOT RELOADING] Error:' — the DOM may be half-patched.
Avoid editing DOM in devtools while hot reload is connected.
Check websocket payload integrity if errors appear on every reload.

When it happens

Trigger: Any runtime error inside patch(): invalid JSON string passed to patch, childAtPath returning undefined then accessed (.node/.children), action handlers assuming fields exist, Range operations on detached nodes.

Common situations: Server sends malformed or truncated JSON over the dev websocket; DOM was mutated externally so expected nodes are gone; race where patches arrive before markers exist in the document.

Related errors

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