mui/material-ui · error · TypeError

No TabContext provided

Error message

No TabContext provided

What it means

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>.

Source

Thrown at packages/mui-lab/src/TabPanel/TabPanel.js:40

  slot: 'Root',
})(({ theme }) => ({
  padding: theme.spacing(3),
}));

const TabPanel = React.forwardRef(function TabPanel(inProps, ref) {
  const props = useThemeProps({ props: inProps, name: 'MuiTabPanel' });

  const { children, className, value, keepMounted = false, ...other } = props;

  const ownerState = {
    ...props,
  };

  const classes = useUtilityClasses(ownerState);

  const context = useTabContext();
  if (context === null) {
    throw new TypeError('No TabContext provided');
  }
  const id = getPanelId(context, value);
  const tabId = getTabId(context, value);

  return (
    <TabPanelRoot
      aria-labelledby={tabId}
      className={clsx(classes.root, className)}
      hidden={value !== context.value}
      id={id}
      ref={ref}
      role="tabpanel"
      ownerState={ownerState}
      {...other}
    >
      {(keepMounted || value === context.value) && children}
    </TabPanelRoot>
  );

View on GitHub (pinned to bdc96df2cb)

Solutions

1. Move the <TabPanel> inside a <TabContext value={value}> subtree.
2. 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).
3. Switch to @mui/material <Tabs>/<TabPanel> equivalent if you do not need the lab composable API.

Example fix

// before
<TabPanel value="1">Content</TabPanel>
// after
<TabContext value={value}>
  <TabPanel value="1">Content</TabPanel>
</TabContext>

import { useContext } from 'react';
import { TabContext } from '@mui/lab';
// const ctx = useContext(TabContext); if (ctx === null) do not render <TabPanel>

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• No TabContext provided
• MUI: MenuListContext is missing. MenuItems must be placed wi
• MUI: RovingTabIndexContext is missing. Roving tab index item
• expected version: string but got '${version}'
• Could not find '${version}' in "${versions}"

AI-assisted analysis of mui/material-ui@bdc96df2cb (2026-08-12). Data as JSON: /api/errors/d87219b06c2bf6f3. Report an issue: GitHub.