{"record":{"id":"b14603db076f38b3","repo":"mastra-ai/mastra","slug":"comment-compounds-must-be-rendered-within-comment","errorCode":null,"errorMessage":"Comment compounds must be rendered within Comment","messagePattern":"Comment compounds must be rendered within Comment","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/playground-ui/src/ds/components/Comment/comment-context.ts","lineNumber":9,"sourceCode":"import { createContext, useContext } from 'react';\n\nexport type CommentVariant = 'default' | 'embed';\n\nexport const CommentContext = createContext<CommentVariant | null>(null);\n\nexport function useCommentVariant(): CommentVariant {\n  const variant = useContext(CommentContext);\n  if (!variant) throw new Error('Comment compounds must be rendered within Comment');\n  return variant;\n}\n","sourceCodeStart":1,"sourceCodeEnd":12,"githubUrl":"https://github.com/mastra-ai/mastra/blob/75dd419e613fe9c39f846ffc500716141b74fda6/packages/playground-ui/src/ds/components/Comment/comment-context.ts#L1-L12","documentation":"useCommentVariant reads the CommentContext that the Comment compound component's Root provides. If the hook runs outside a <Comment.Root>, the context is null and the library throws to fail fast — compound subcomponents (variant-aware pieces) are only valid inside the Comment tree.","triggerScenarios":"Rendering a Comment subcomponent (or any consumer of useCommentVariant) without wrapping it in <Comment.Root>; moving a subcomponent out of the Root via a portal or refactoring that broke the JSX nesting.","commonSituations":"Extracting a variant-aware button into its own file/usage and rendering it standalone; conditional rendering where Root is unmounted but children remain; mis-importing the subcomponent from the barrel without Root.","solutions":["Wrap the consuming subtree in <Comment.Root>...</Comment.Root>.","If a component legitimately needs to work standalone, have it call a nullable variant accessor instead of useCommentVariant (add a useMaybeCommentVariant that returns null).","Check for portals/suspense boundaries that detach children from the Root's context provider.","Verify imports: the consumer must come from the Comment compound module and be nested under Root in the JSX tree."],"exampleFix":"// before\n<Comment.Avatar src={url} /> // outside Root\n// after\n<Comment.Root>\n  <Comment.Avatar src={url} />\n</Comment.Root>","handlingStrategy":"try-catch","validationCode":"// Structural validation: ensure the consumer sits under Comment.Root in the JSX tree.\n// At runtime, check the variant before using it:\nconst variant = useMaybeCommentVariant?.() ?? null; // nullable accessor if available\nif (variant === null) console.warn('Comment subcomponent rendered outside <Comment.Root>');","typeGuard":"function isInCommentRoot(ctx: CommentVariant | null): ctx is CommentVariant {\n  return ctx !== null;\n}","tryCatchPattern":"try {\n  const variant = useCommentVariant(); // hooks can't be in try/catch — validate context instead\n} catch {\n  // not applicable for hooks; use a nullable context hook and handle null\n}","preventionTips":["Always compose compound components as Root > children; never export subcomponents for standalone use.","Create useMaybeX nullable variants for optional-context consumers.","Watch for portals/Suspense that visually nest but must remain tree-nested under the provider.","Add a Storybook/test that mounts subcomponents exactly as Root-wrapped."],"tags":["react","context","compound-components","playground-ui"],"backgroundTag":"missing-react-context-provider","analyzedSha":"75dd419e613fe9c39f846ffc500716141b74fda6","analyzedAt":"2026-08-30T00:15:31.844Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}