title: Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'
body: <p>I am new to ReactJs and I am trying to implement TabContext using material UI library of react and I am getting the error above. I think it's due to path. I tried to install material UI again but it didn't help. I am sharing my code.Please check</p>
  <p><em><strong>my-app/src/App.js</strong></em></p>
  <pre><code>import logo from './logo.svg';
  import './App.css';
  import Navbar from './Components/Navbar';
  import Form from './Components/Form';
  
  
  function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;Hi&lt;/h1&gt;
        &lt;Navbar&gt;&lt;/Navbar&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><em><strong>my-app/src/Components/Navbar.js</strong></em></p>
  <pre><code>import React from 'react'
  import { makeStyles } from '@material-ui/core/styles';
  import AppBar from '@material-ui/core/AppBar';
  import Tab from '@material-ui/core/Tab';
  import {TabContext} from '@material-ui/lab/TabContext';
  import {TabList} from '@material-ui/lab/TabList';
  import {TabPanel} from '@material-ui/lab/TabPanel';
  
  
  const useStyles = makeStyles((theme) =&gt; ({
    root: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.paper,
    },
  }));
  
  function Navbar() {
      const classes = useStyles();
    const [value, setValue] = React.useState('1');
  
    const handleChange = (event, newValue) =&gt; {
      setValue(newValue);
    };
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;TabContext value={value}&gt;
          &lt;AppBar position=&quot;static&quot;&gt;
            &lt;TabList onChange={handleChange} aria-label=&quot;simple tabs example&quot;&gt;
              &lt;Tab label=&quot;Item One&quot; value=&quot;1&quot; /&gt;
              &lt;Tab label=&quot;Item Two&quot; value=&quot;2&quot; /&gt;
              &lt;Tab label=&quot;Item Three&quot; value=&quot;3&quot; /&gt;
            &lt;/TabList&gt;
          &lt;/AppBar&gt;
          &lt;TabPanel value=&quot;1&quot;&gt;Item One&lt;/TabPanel&gt;
          &lt;TabPanel value=&quot;2&quot;&gt;Item Two&lt;/TabPanel&gt;
          &lt;TabPanel value=&quot;3&quot;&gt;Item Three&lt;/TabPanel&gt;
        &lt;/TabContext&gt;
      &lt;/div&gt;
    );
  }
  
  export default Navbar
  </code></pre>
  <p><em><strong>package.json</strong></em></p>
  <pre><code>{
    &quot;name&quot;: &quot;my-forms&quot;,
    &quot;version&quot;: &quot;0.1.0&quot;,
    &quot;private&quot;: true,
    &quot;dependencies&quot;: {
      &quot;@material-ui/core&quot;: &quot;^4.12.3&quot;,
      &quot;@testing-library/jest-dom&quot;: &quot;^5.14.1&quot;,
      &quot;@testing-library/react&quot;: &quot;^11.2.7&quot;,
      &quot;@testing-library/user-event&quot;: &quot;^12.8.3&quot;,
      &quot;material-ui&quot;: &quot;^0.20.2&quot;,
      &quot;react&quot;: &quot;^17.0.2&quot;,
      &quot;react-dom&quot;: &quot;^17.0.2&quot;,
      &quot;react-scripts&quot;: &quot;4.0.3&quot;,
      &quot;web-vitals&quot;: &quot;^1.1.2&quot;
    },
    &quot;scripts&quot;: {
      &quot;start&quot;: &quot;react-scripts start&quot;,
      &quot;build&quot;: &quot;react-scripts build&quot;,
      &quot;test&quot;: &quot;react-scripts test&quot;,
      &quot;eject&quot;: &quot;react-scripts eject&quot;
    },
    &quot;eslintConfig&quot;: {
      &quot;extends&quot;: [
        &quot;react-app&quot;,
        &quot;react-app/jest&quot;
      ]
    },
    &quot;browserslist&quot;: {
      &quot;production&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;development&quot;: [
        &quot;last 1 chrome version&quot;,
        &quot;last 1 firefox version&quot;,
        &quot;last 1 safari version&quot;
      ]
    }
  }
  </code></pre>