{"record":{"id":"ba5b8aee2b6efe35","repo":"facebook/react","slug":"did-not-expect-a-host-hoistable-to-be-the-root","errorCode":null,"errorMessage":"Did not expect a host hoistable to be the root","messagePattern":"Did not expect a host hoistable to be the root","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-devtools-shared/src/backend/fiber/renderer.js","lineNumber":3444,"sourceCode":"          const elementType = getElementTypeForFiber(fiber);\n          // If an ancestor updated, we should mark the nearest host nodes for highlighting.\n          if (elementType === ElementTypeHostComponent) {\n            traceUpdatesForNodes.add(fiber.stateNode);\n            traceNearestHostComponentUpdate = false;\n          }\n        }\n\n        // We intentionally do not re-enable the traceNearestHostComponentUpdate flag in this branch,\n        // because we don't want to highlight every host node inside of a newly mounted subtree.\n      }\n\n      trackDebugInfoFromLazyType(fiber);\n      trackDebugInfoFromUsedThenables(fiber);\n\n      if (fiber.tag === HostHoistable) {\n        const nearestInstance = reconcilingParent;\n        if (nearestInstance === null) {\n          throw new Error('Did not expect a host hoistable to be the root');\n        }\n        aquireHostResource(nearestInstance, fiber.memoizedState);\n        trackDebugInfoFromHostResource(nearestInstance, fiber);\n      } else if (\n        fiber.tag === HostComponent ||\n        fiber.tag === HostText ||\n        fiber.tag === HostSingleton\n      ) {\n        const nearestInstance = reconcilingParent;\n        if (nearestInstance === null) {\n          throw new Error('Did not expect a host hoistable to be the root');\n        }\n        aquireHostInstance(nearestInstance, fiber.stateNode);\n        trackDebugInfoFromHostComponent(nearestInstance, fiber);\n      }\n\n      if (isSuspendedOffscreen(fiber)) {\n        // If an Offscreen component is hidden, mount its children as disconnected.","sourceCodeStart":3426,"sourceCodeEnd":3462,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-devtools-shared/src/backend/fiber/renderer.js#L3426-L3462","documentation":"DevTools backend invariant from the mount traversal: a HostHoistable fiber (React 19 hoistables such as <link rel=stylesheet precedence>, hoisted <style>/<script>/<title>) has no reconciling parent instance, i.e. the hoistable is being processed as the root of the mirrored tree. DevTools expects hoistables to always be attributed to a nearest composite parent, never to be the traversal root.","triggerScenarios":"A hoistable fiber appearing at the point where mountChildrenRecursively starts (root-level fiber), typically when DevTools begins mirroring at a fiber that is itself a hoistable; renderer/DevTools version skew around React 19 resource hoisting.","commonSituations":"React 19 documents using hoistable tags (<link precedence>, <title>, <meta>) rendered near the root while using an older DevTools backend that lacks support for the hoistable attribution model.","solutions":["Update React DevTools to a build that supports React 19 hoistables (HostHoistable tag handling)","Align React and DevTools release channels (canary React needs the matching DevTools build)","If reproducible, file an issue with the hoistable markup that triggers it (link/style/script with precedence)","As a temporary workaround, move the hoistable out of the traversed root position or use plain host elements"],"exampleFix":null,"handlingStrategy":"try-catch","validationCode":null,"typeGuard":null,"tryCatchPattern":"try {\n  backend.handleCommitFiberRoot(renderer, root);\n} catch (e) {\n  if (/Did not expect a host hoistable to be the root/.test(e.message)) {\n    reportDevToolsBug(e, {hoistables: collectHoistables(root)});\n  } else throw e;\n}","preventionTips":["Use a DevTools build that supports React 19 hoistables when rendering <link precedence>/<style>/<title> near the root","Keep hoistable elements stable across renders (stable href/precedence) so they are not reprocessed as traversal roots","Align React and DevTools release channels before testing hoisting features","Report hoistable markup that reliably triggers the error"],"tags":["react-devtools","invariant","hoistable","host-component","react-19","internal"],"backgroundTag":"devtools-tree-traversal-invariant","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}