Module not found: Can't resolve '@material-ui/lab/TabContext' in '/home/sanika/Desktop/Coding/React/my-forms/src/Components'

Question

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

my-app/src/App.js

import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';


function App() {
  return (
    <div className="App">
      <h1>Hi</h1>
      <Navbar></Navbar>
    </div>
  );
}

export default App;

my-app/src/Components/Navbar.js

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) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper,
  },
}));

function Navbar() {
    const classes = useStyles();
  const [value, setValue] = React.useState('1');

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <TabContext value={value}>
        <AppBar position="static">
          <TabList onChange={handleChange} aria-label="simple tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </AppBar>
        <TabPanel value="1">Item One</TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
      </TabContext>
    </div>
  );
}

export default Navbar

package.json

{
  "name": "my-forms",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.12.3",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "material-ui": "^0.20.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

In my-app/src/Components/Navbar.js
try this:

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';

Answer 2

It seems like you are actually trying to import some components from the lab side of material-ui but from your package I don't see it installed in your project. To use the lab components you need to install a separate dependency.

https://material-ui.com/components/about-the-lab/

So basically will need to install it.

npm install @material-ui/lab

Answer 3

If you've installed, @material-ui/lab then change your import in Navbar.js

import TabContext from '@material-ui/lab/TabContext';
// or
import { TabContext } from '@material-ui/lab';

Ref:- https://material-ui.com/api/tab-context/

You're doing import {TabContext} from '@material-ui/lab/TabContext'; which is incorrect. Same correction would be needed for TabList and TabPanel

Answer 4

You need to install @material-ui/lab and @material-ui/core as well.

npm install @material-ui/lab
npm install @material-ui/core

Then use these imports:

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';

The above tested for @material-ui/core v4.12 and @material-ui/lab v4.0 .

Answer 5

You need to install @mui/lab and @mui/material .

https: //mui.com/material-ui/about-the-lab/#installation

npm install @mui/lab @mui/material

For yarn:

yarn add @mui/lab @mui/material