{"record":{"id":"876992ff28826962","repo":"facebook/react","slug":"devtools-tooltip-root-node-not-found-can-t-displa","errorCode":null,"errorMessage":"DevTools tooltip root node not found: can't display the context menu","messagePattern":"DevTools tooltip root node not found: can't display the context menu","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js","lineNumber":50,"sourceCode":"  }, []);\n\n  useEffect(() => {\n    const anchor = anchorElementRef.current;\n    if (anchor == null) return;\n\n    function handleAnchorContextMenu(e: MouseEvent) {\n      e.preventDefault();\n      e.stopPropagation();\n\n      const {pageX, pageY} = e;\n\n      const ownerDocument = anchor?.ownerDocument;\n      const portalContainer = ownerDocument?.querySelector(\n        '[data-react-devtools-portal-root]',\n      );\n\n      if (portalContainer == null) {\n        throw new Error(\n          \"DevTools tooltip root node not found: can't display the context menu\",\n        );\n      }\n\n      // `x` and `y` should be relative to the container, to which these context menus will be portaled\n      // we can't use just `pageX` or `pageY` for Fusebox integration, because RDT frontend is inlined with the whole document\n      // meaning that `pageY` will have an offset of 27, which is the tab bar height\n      // for the browser extension, these will equal to 0\n      const {top: containerTop, left: containerLeft} =\n        portalContainer.getBoundingClientRect();\n\n      setShouldShow(true);\n      setPosition({x: pageX - containerLeft, y: pageY - containerTop});\n    }\n\n    anchor.addEventListener('contextmenu', handleAnchorContextMenu);\n    return () => {\n      anchor.removeEventListener('contextmenu', handleAnchorContextMenu);","sourceCodeStart":32,"sourceCodeEnd":68,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js#L32-L68","documentation":"The DevTools context-menu hook portals menus into a container element marked data-react-devtools-portal-root, looked up in the anchor's ownerDocument. When you right-click an element and that node cannot be found, useContextMenu throws instead of rendering a menu at wrong coordinates. The error indicates the DevTools host markup is missing or the anchor lives in a different document than expected.","triggerScenarios":"A contextmenu event fires on an anchored element, and anchor.ownerDocument.querySelector('[data-react-devtools-portal-root]') returns null — e.g. the host page removed/renamed the portal root, or the anchor is inside an iframe/popup whose document never contained it.","commonSituations":"Embedding the DevTools frontend (Fusebox inlined build, custom integrations) without the expected root markup; anchors rendered into iframes or new windows; CSS/DOM sanitization or SSR hydration dropping unknown empty divs; version skew where markup expectations changed.","solutions":["Ensure the host document contains the portal root: <div data-react-devtools-portal-root=\"\" /> in the document DevTools is mounted into.","If anchors can live in iframes/popups, add the portal root to that same ownerDocument (or re-anchor the UI into the main document).","Upgrade react-devtools-shared to match the frontend markup it expects."],"exampleFix":"// before — host page mounts DevTools without the portal root\n<div id=\"root\" />;\n\n// after — provide the node context menus portal into\n<div data-react-devtools-portal-root=\"\" />;\n<div id=\"root\" />;","handlingStrategy":"validation","validationCode":"function ensurePortalRoot(doc) {\n  let node = doc.querySelector('[data-react-devtools-portal-root]');\n  if (node == null) {\n    node = doc.createElement('div');\n    node.setAttribute('data-react-devtools-portal-root', '');\n    doc.body.appendChild(node);\n  }\n  return node;\n}\nensurePortalRoot(anchor.ownerDocument);","typeGuard":"function hasPortalRoot(doc) {\n  return doc.querySelector('[data-react-devtools-portal-root]') != null;\n}","tryCatchPattern":"try {\n  setShouldShow(true);\n} catch (error) {\n  if (/DevTools tooltip root node not found/.test(error.message)) return;\n  throw error;\n}","preventionTips":["Always render <div data-react-devtools-portal-root=\"\" /> in the document hosting DevTools.","When anchoring into iframes/popups, provide the portal root in that same document.","Assert the portal root exists in integration tests for embedded DevTools builds."],"tags":["devtools","context-menu","portal","dom","embedding"],"backgroundTag":"missing-portal-container","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}