{"record":{"id":"40b08995421924e9","repo":"facebook/react","slug":"cannot-cancel-root-view-transition-on-a-comment-no","errorCode":null,"errorMessage":"Cannot cancel root view transition on a comment node. All view transitions will be globally scoped.","messagePattern":"Cannot cancel root view transition on a comment node\\. All view transitions will be globally scoped\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js","lineNumber":1669,"sourceCode":"        fill: 'forwards',\n        pseudoElement: '::view-transition-group(' + oldName + ')',\n      },\n    );\n  }\n}\n\nexport function cancelRootViewTransitionName(rootContainer: Container): void {\n  const documentElement: null | HTMLElement =\n    rootContainer.nodeType === DOCUMENT_NODE\n      ? (rootContainer as any).documentElement\n      : rootContainer.ownerDocument.documentElement;\n\n  if (\n    !disableCommentsAsDOMContainers &&\n    rootContainer.nodeType === COMMENT_NODE\n  ) {\n    if (__DEV__) {\n      console.warn(\n        'Cannot cancel root view transition on a comment node. All view transitions will be globally scoped.',\n      );\n    }\n    return;\n  }\n\n  if (\n    documentElement !== null &&\n    // $FlowFixMe[prop-missing]\n    documentElement.style.viewTransitionName === ''\n  ) {\n    // $FlowFixMe[prop-missing]\n    documentElement.style.viewTransitionName = 'none';\n    documentElement.animate(\n      {opacity: [0, 0], pointerEvents: ['none', 'none']},\n      // $FlowFixMe[incompatible-type]\n      {\n        duration: 0,","sourceCodeStart":1651,"sourceCodeEnd":1687,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L1651-L1687","documentation":"cancelRootViewTransitionName (packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js:1669) removes the viewTransitionName react-dom previously set on the container's documentElement when a root's document-level view transition is cancelled. When the root container is a comment node (rendering into <!-- comment --> containers is supported via disableCommentsAsDOMContainers), there is no element to un-name, so react-dom warns and returns: document-level (globally scoped) view transitions cannot be cancelled for this root. The consequence is that any viewTransitionName set on documentElement stays, so subsequent transitions remain globally scoped.","triggerScenarios":"Calling createRoot/hydrateRoot with a comment node as the container (or a container that resolves to one) while using View Transitions that assign a root-level viewTransitionName, then unmounting or cancelling the transition; typically only when the disableCommentsAsDOMContainers flag is off and comment containers are in play.","commonSituations":"Frameworks that mount React into comment placeholders for SSR streaming boundaries; test environments using comment nodes as containers; apps experimenting with the document-level View Transition APIs on comment-mounted roots.","solutions":["Mount the root into a real element (e.g. <div id=\"root\">) instead of a comment node when you rely on document-level view transitions.","If a comment container is required, manually clear documentElement.style.viewTransitionName on unmount so later transitions are not stuck globally scoped.","Scope view transitions to elements inside the root rather than the document root when comment containers must be used."],"exampleFix":"// before\nconst container = document.createComment('react-root');\ndocument.body.appendChild(container);\nconst root = createRoot(container);\n\n// after\nconst container = document.createElement('div');\ndocument.body.appendChild(container);\nconst root = createRoot(container);","handlingStrategy":"validation","validationCode":"const COMMENT_NODE = 8;\nif (container.nodeType === COMMENT_NODE) {\n  // document-level view transitions cannot be cancelled for this root;\n  // clear the name manually on unmount\n  document.documentElement.style.viewTransitionName = '';\n}","typeGuard":"const isElementContainer = (container: Node): container is HTMLElement =>\n  container.nodeType === 1; // ELEMENT_NODE, safe for root view transitions","tryCatchPattern":null,"preventionTips":["Mount roots into real elements (<div>) when relying on document-level View Transitions.","If comment containers are required, manually reset documentElement.style.viewTransitionName on unmount.","Scope viewTransitionName to elements inside the root instead of the document root."],"tags":["react-dom","view-transitions","container-node","dev-only"],"backgroundTag":"invalid-dom-container","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}