{"record":{"id":"d87219b06c2bf6f3","repo":"mui/material-ui","slug":"no-tabcontext-provided-d87219","errorCode":null,"errorMessage":"No TabContext provided","messagePattern":"No TabContext provided","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/mui-lab/src/TabPanel/TabPanel.js","lineNumber":40,"sourceCode":"  slot: 'Root',\n})(({ theme }) => ({\n  padding: theme.spacing(3),\n}));\n\nconst TabPanel = React.forwardRef(function TabPanel(inProps, ref) {\n  const props = useThemeProps({ props: inProps, name: 'MuiTabPanel' });\n\n  const { children, className, value, keepMounted = false, ...other } = props;\n\n  const ownerState = {\n    ...props,\n  };\n\n  const classes = useUtilityClasses(ownerState);\n\n  const context = useTabContext();\n  if (context === null) {\n    throw new TypeError('No TabContext provided');\n  }\n  const id = getPanelId(context, value);\n  const tabId = getTabId(context, value);\n\n  return (\n    <TabPanelRoot\n      aria-labelledby={tabId}\n      className={clsx(classes.root, className)}\n      hidden={value !== context.value}\n      id={id}\n      ref={ref}\n      role=\"tabpanel\"\n      ownerState={ownerState}\n      {...other}\n    >\n      {(keepMounted || value === context.value) && children}\n    </TabPanelRoot>\n  );","sourceCodeStart":22,"sourceCodeEnd":58,"githubUrl":"https://github.com/mui/material-ui/blob/bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5/packages/mui-lab/src/TabPanel/TabPanel.js#L22-L58","documentation":"TabPanel from @mui/lab uses useTabContext() to look up whether its value is the active tab and to compute its aria id. Like TabList, it throws TypeError when context is null because it cannot determine visibility without context.value. TabPanel must be a descendant of <TabContext>.","triggerScenarios":"Rendering <TabPanel value=\"x\"> without a <TabContext> ancestor; placing TabPanel outside the TabContext tree (e.g. in a portal or sibling subtree) when splitting the tab UI across components.","commonSituations":"Refactoring a tabs layout and moving the panel content into a separate component rendered outside TabContext; using @mui/lab TabPanel while still wiring state manually with @mui/material Tabs.","solutions":["Move the <TabPanel> inside a <TabContext value={value}> subtree.","If the panel lives in a different component, make sure that component is still rendered as a descendant of TabContext (context is not cross-tree).","Switch to @mui/material <Tabs>/<TabPanel> equivalent if you do not need the lab composable API."],"exampleFix":"// before\n<TabPanel value=\"1\">Content</TabPanel>\n// after\n<TabContext value={value}>\n  <TabPanel value=\"1\">Content</TabPanel>\n</TabContext>","handlingStrategy":"validation","validationCode":"import { useContext } from 'react';\nimport { TabContext } from '@mui/lab';\n// const ctx = useContext(TabContext); if (ctx === null) do not render <TabPanel>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep TabPanel within the same <TabContext> subtree as its TabList.","If panel content lives in a separate component, render that component as a descendant of TabContext.","Consider @mui/material Tabs if you do not need the lab composable API."],"tags":["react","lab","tabs","context","misuse"],"backgroundTag":null,"analyzedSha":"bdc96df2cb530fcdd60a7a7aabe37f610ce0f0a5","analyzedAt":"2026-08-12T22:59:56.717Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}