{"record":{"id":"f61556a79cc90119","repo":"shadcn-ui/ui","slug":"messagescrolleritem-must-be-used-within-a-messages","errorCode":null,"errorMessage":"MessageScrollerItem must be used within a MessageScroller.","messagePattern":"MessageScrollerItem must be used within a MessageScroller\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react/src/message-scroller/components.tsx","lineNumber":37,"sourceCode":"  React.createContext<MessageScrollerContextValue | null>(null)\nconst MessageScrollerItemContext =\n  React.createContext<MessageScrollerRegisterMessage | null>(null)\n\nfunction useMessageScrollerContext() {\n  const context = React.useContext(MessageScrollerContext)\n\n  if (!context) {\n    throw new Error(\"useMessageScroller must be used within a MessageScroller.\")\n  }\n\n  return context\n}\n\nfunction useMessageScrollerItemContext() {\n  const context = React.useContext(MessageScrollerItemContext)\n\n  if (!context) {\n    throw new Error(\n      \"MessageScrollerItem must be used within a MessageScroller.\"\n    )\n  }\n\n  return context\n}\n\nfunction useMessageScroller() {\n  const { scrollToEnd, scrollToMessage, scrollToStart } =\n    useMessageScrollerContext()\n\n  return React.useMemo(\n    () => ({\n      scrollToEnd,\n      scrollToMessage,\n      scrollToStart,\n    }),\n    [scrollToEnd, scrollToMessage, scrollToStart]","sourceCodeStart":19,"sourceCodeEnd":55,"githubUrl":"https://github.com/shadcn-ui/ui/blob/efac5987074af84ece57c367c6dd83387b967022/packages/react/src/message-scroller/components.tsx#L19-L55","documentation":"useMessageScrollerItemContext reads MessageScrollerItemContext, which only <MessageScrollerItem> populates (registration data for a single message). Components that need per-item registration call this hook; outside a <MessageScrollerItem> (itself expected within a <MessageScroller>) the context is null and the hook throws, because there is no message to register.","triggerScenarios":"Rendering a component that consumes MessageScrollerItemContext directly under <MessageScroller> but not inside <MessageScrollerItem>; using an item sub-component as a standalone; nesting it under the wrong provider.","commonSituations":"Building a custom message row and forgetting the <MessageScrollerItem> wrapper; refactor that drops the item boundary; portal content rendered outside the item.","solutions":["Wrap each message row in <MessageScrollerItem>.","Ensure <MessageScrollerItem> itself is within <MessageScroller>.","Move item-consuming components back inside their <MessageScrollerItem>."],"exampleFix":"// before\n<MessageScroller>\n  <MessageRow /> // consumes item context, no wrapper\n</MessageScroller>\n\n// after\n<MessageScroller>\n  <MessageScrollerItem>\n    <MessageRow />\n  </MessageScrollerItem>\n</MessageScroller>","handlingStrategy":"validation","validationCode":"function useOptionalMessageScrollerItem() {\n  return React.useContext(MessageScrollerItemContext)\n}\nconst item = useOptionalMessageScrollerItem()\nif (!item) return null","typeGuard":"function useHasMessageScrollerItem(): boolean {\n  return React.useContext(MessageScrollerItemContext) !== null\n}","tryCatchPattern":null,"preventionTips":["Wrap each message row in <MessageScrollerItem> before consuming item context.","Ensure <MessageScrollerItem> is itself inside <MessageScroller>.","Keep item-consuming components within their item boundary."],"tags":["react","context","message-scroller","item"],"backgroundTag":null,"analyzedSha":"efac5987074af84ece57c367c6dd83387b967022","analyzedAt":"2026-08-12T05:00:50.218Z","schemaVersion":2},"datasetVersion":"2026-08-12T13:17:24.610Z"}