vercel-labs/agent-browser · error

React DevTools hook not installed - relaunch with --enable r

Error message

React DevTools hook not installed - relaunch with --enable react-devtools

What it means

'react tree' evaluates TREE_SNAPSHOT, which reads window.__REACT_DEVTOOLS_GLOBAL_HOOK__. That hook only exists when the browser was launched with '--enable react-devtools': the vendored installHook.js is registered via addScriptToEvaluateOnNewDocument so it runs before any page JS. Without the flag no hook is installed and every React-side subcommand fails at this first guard.

Source

Thrown at cli/src/native/react/scripts.rs:51

    let firstWithRoots = null, firstAny = null;
    for (const id of ris.keys()) {
      if (!ris.get(id)) continue;
      if (firstAny === null) firstAny = id;
      if (rootsOf(id) > 0) {
        if (firstWithRoots === null) firstWithRoots = id;
        if (!isFlight(id)) return id;
      }
    }
    return firstWithRoots !== null ? firstWithRoots : firstAny;
  }
"#;

/// Build a no-argument async IIFE page-eval that returns the component tree as
/// JSON.
pub const TREE_SNAPSHOT: &str = r#"
(async () => {
  const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
  if (!hook) throw new Error("React DevTools hook not installed - relaunch with --enable react-devtools");
{{PICK_RI}}
  const __abRiId = __abPickReactRendererId(hook);
  const ri = (__abRiId != null && hook.rendererInterfaces && hook.rendererInterfaces.get) ? hook.rendererInterfaces.get(__abRiId) : null;
  if (!ri) throw new Error("No React renderer attached - the page has not booted React yet");

  const batches = await new Promise((resolve) => {
    const out = [];
    const origEmit = hook.emit;
    hook.emit = function (event, payload) {
      if (event === "operations") out.push(Array.from(payload));
      return origEmit.apply(hook, arguments);
    };
    ri.flushInitialOperations();
    setTimeout(() => {
      hook.emit = origEmit;
      resolve(out);
    }, 50);
  });

View on GitHub (pinned to 548b159b30)

Solutions

1. Close and relaunch the browser with the flag: 'agent-browser close' then 'agent-browser open <url> --enable react-devtools'
2. Verify the hook landed: 'agent-browser eval "!!window.__REACT_DEVTOOLS_GLOBAL_HOOK__"' should print true
3. Make the flag part of every launch in your scripts/config so React introspection is always available

Example fix

# before
agent-browser open https://app
agent-browser react tree   # hook not installed

# after
agent-browser close
agent-browser open https://app --enable react-devtools
agent-browser react tree

# before any react subcommand:
agent-browser eval "!!window.__REACT_DEVTOOLS_GLOBAL_HOOK__"
# prints true only when the hook is installed

function hasDevToolsHook(win: Window): boolean {
  return typeof (win as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object";
}

When it happens

Trigger: Running 'agent-browser react tree' (or any react subcommand) against a session launched without '--enable react-devtools'; enabling the flag mid-session does not inject the hook into already-loaded documents, so documents opened before enabling also fail.

Common situations: Forgetting the flag at launch; automation scripts that assume the DevTools hook is always present; opening the page first and adding the flag to later commands (it is a launch-time option, not a per-command one).

Related errors

• No React renderer attached - the page has not booted React y
• No React renderer attached
• inspect failed: ${result && result.type}
• renders recording not active - run `react renders start` fir
• agent-browser ${args[0] ?? ""} failed: ${envelope.error ?? "

AI-assisted analysis of vercel-labs/agent-browser@548b159b30 (2026-08-16). Data as JSON: /api/errors/b1989edc82d75eee. Report an issue: GitHub.