{"record":{"id":"76f1a3483a2abbd5","repo":"CherryHQ/cherry-studio","slug":"name-must-be-used-inside-treeview","errorCode":null,"errorMessage":"${name} must be used inside <TreeView />","messagePattern":"(.+?) must be used inside <TreeView />","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ui/src/components/composites/tree-view/contexts.ts","lineNumber":26,"sourceCode":" */\n\nexport interface TreeActionsContextValue {\n  toggleExpanded: (id: string) => void\n  selectNode: (id: string) => void\n  getDragHandleProps: (id: string) => TreeDragHandleProps\n}\n\nexport interface TreeSelectionContextValue {\n  expandedIds: ReadonlySet<string>\n  selectedId: string | null\n}\n\nexport const TreeActionsContext = createContext<TreeActionsContextValue | null>(null)\nexport const TreeSelectionContext = createContext<TreeSelectionContextValue | null>(null)\n\nfunction ensure<T>(value: T | null, name: string): T {\n  if (value === null) {\n    throw new Error(`${name} must be used inside <TreeView />`)\n  }\n  return value\n}\n\nexport function useTreeActions(): TreeActionsContextValue {\n  return ensure(use(TreeActionsContext), 'useTreeActions')\n}\n\nexport function useTreeSelection(): TreeSelectionContextValue {\n  return ensure(use(TreeSelectionContext), 'useTreeSelection')\n}\n","sourceCodeStart":8,"sourceCodeEnd":38,"githubUrl":"https://github.com/CherryHQ/cherry-studio/blob/726446b54cd69ffe51a276638672f6d95ca0768c/packages/ui/src/components/composites/tree-view/contexts.ts#L8-L38","documentation":"Thrown by the ensure() helper in the TreeView context module when useTreeActions() or useTreeSelection() is called outside of a <TreeView /> component. TreeView provides the TreeActionsContext and TreeSelectionContext via React context; the hooks read those contexts and assert they are non-null. This is the standard React 'context used without provider' guard, mirroring patterns from Radix/Headless UI.","triggerScenarios":"Rendering a TreeRow, TreeItem, or any custom component that calls useTreeActions()/useTreeSelection() as a sibling of <TreeView> rather than a descendant. Also triggered when a TreeView subcomponent is extracted into a story/test (e.g. Storybook, React Testing Library) without wrapping it in <TreeView>, or when conditional rendering accidentally renders the consumer above the provider in the tree.","commonSituations":"Writing a unit test for a single tree row component in isolation; copy-pasting a row renderer outside the tree; refactoring that moves a hook call into a wrapper component rendered alongside (not inside) TreeView; using the hook in a toolbar that lives outside the tree container.","solutions":["Move the component calling useTreeActions()/useTreeSelection() so it is rendered as a child of <TreeView>.","In tests/stories, wrap the consumer in <TreeView items={[...]}>{<YourRow />}</TreeView> (or a minimal TreeView fixture) before rendering.","If you need tree state in a sibling (e.g. an external toolbar), lift that state up and pass it via props, or expose a controlled API on TreeView rather than calling the internal hook.","Check the component tree with React DevTools to confirm the provider is an ancestor of the consumer."],"exampleFix":"// before\nfunction Toolbar() {\n  const { selectNode } = useTreeActions() // throws: not inside TreeView\n  return <button onClick={() => selectNode('x')}>select</button>\n}\n<TreeView .../>\n<Toolbar />\n\n// after\n<TreeView ...>\n  <Toolbar />\n</TreeView>","handlingStrategy":"type-guard","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always render TreeView subcomponents (anything calling useTreeActions/useTreeSelection) as descendants of <TreeView>.","In tests/stories, wrap isolated row components in a <TreeView> fixture before rendering.","If you need tree actions outside the tree, expose a controlled callback prop on TreeView instead of calling the internal hook.","Use React DevTools to confirm the provider is an ancestor before debugging missing-context errors."],"tags":["react","context","tree-view","provider","typescript"],"backgroundTag":null,"analyzedSha":"726446b54cd69ffe51a276638672f6d95ca0768c","analyzedAt":"2026-08-12T17:30:37.448Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}