{"record":{"id":"20fa31f0f8265fd5","repo":"TanStack/table","slug":"usetabledevtoolscontext-must-be-used-within-tablec","errorCode":null,"errorMessage":"useTableDevtoolsContext must be used within TableContextProvider","messagePattern":"useTableDevtoolsContext must be used within TableContextProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/table-devtools/src/TableContextProvider.tsx","lineNumber":97,"sourceCode":"      value={{\n        targets,\n        selectedTargetId,\n        setSelectedTargetId,\n        table,\n        activeTab,\n        setActiveTab,\n      }}\n    >\n      {props.children}\n    </TableDevtoolsContext.Provider>\n  )\n}\n\nexport function useTableDevtoolsContext() {\n  const context = useContext(TableDevtoolsContext)\n\n  if (!context) {\n    throw new Error(\n      'useTableDevtoolsContext must be used within TableContextProvider',\n    )\n  }\n\n  return context\n}\n","sourceCodeStart":79,"sourceCodeEnd":104,"githubUrl":"https://github.com/TanStack/table/blob/d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6/packages/table-devtools/src/TableContextProvider.tsx#L79-L104","documentation":"useTableDevtoolsContext is a React context hook that reads TableDevtoolsContext and throws when the context value is undefined. This happens only when the hook is called outside of a <TableContextProvider>. The devtools package deliberately fails fast instead of returning a null context that would blow up later.","triggerScenarios":"Calling useTableDevtoolsContext() in any component not rendered inside <TableContextProvider>, forgetting the provider wrapper at the app root, rendering the devtools panel in a separate React root/portal that lacks the provider, or multiple React copies causing context to not propagate.","commonSituations":"Adding the devtools panel to a storybook story or test render without the provider; moving a component that used the hook into a modal rendered via a different root; copy-pasting a devtools component into another app section; renaming/removing the provider during refactors.","solutions":["Wrap the consuming component tree in <TableContextProvider> (from packages/table-devtools/src/TableContextProvider.tsx) above the component calling useTableDevtoolsContext.","Check render order: ensure the provider mounts before (is an ancestor of) the hook consumer, not a sibling.","In tests/stories, add the provider to the render wrapper (e.g. render(<TableContextProvider><MyPanel/></TableContextProvider>) or a wrapper option).","Verify only one copy/version of React is installed so the context object is shared (npm ls react)."],"exampleFix":"// before\nfunction DevtoolsPanel() {\n  const { activeTab, setActiveTab, targets } = useTableDevtoolsContext()\n  // ...\n}\nrender(<DevtoolsPanel />)\n\n// after\nrender(\n  <TableContextProvider>\n    <DevtoolsPanel />\n  </TableContextProvider>\n)","handlingStrategy":"validation","validationCode":"function isInsideTableContextProvider(element: React.ReactElement) {\n  let node = element\n  // walk up via a render-tree check in tests, or simply verify at module load:\n  return React.isValidElement(element)\n}\n// Practical pre-check in the consumer:\nconst ctx = React.useContext(TableDevtoolsContext)\nif (ctx === undefined) {\n  throw new Error('DevtoolsPanel must be rendered inside <TableContextProvider>')\n}","typeGuard":"function hasDevtoolsContext(ctx: TableDevtoolsContextValue | undefined | null): ctx is TableDevtoolsContextValue {\n  return ctx != null\n}","tryCatchPattern":null,"preventionTips":["Always render devtools components inside <TableContextProvider> at the app root.","Add the provider to the shared test/storybook render wrapper so every render includes it.","Create a thin wrapper component that combines the provider with the devtools panel so consumers cannot forget the provider.","Keep provider and hook imports from the same package version to avoid duplicate context objects."],"tags":["react","context","devtools","missing-provider"],"backgroundTag":"react-context-provider-missing","analyzedSha":"d01c01bedbab0ff6c2641f18b2fc9a11545d9bf6","analyzedAt":"2026-08-28T21:52:44.679Z","schemaVersion":2},"datasetVersion":"2026-08-29T02:17:18.158Z"}