admin管理员组文章数量:1323348
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"
]
}
}
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"
]
}
}
Share
Improve this question
edited Aug 25, 2021 at 12:34
Kartik Dolas
7611 gold badge12 silver badges27 bronze badges
asked Aug 21, 2021 at 18:45
Sanika BagjilewaleSanika Bagjilewale
531 gold badge1 silver badge8 bronze badges
5 Answers
Reset to default 2In 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';
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
.
It seems like you are actually trying to import some ponents from the lab
side of material-ui but from your package I don't see it installed in your project. To use the lab
ponents you need to install a separate dependency.
https://material-ui./ponents/about-the-lab/
So basically will need to install it.
npm install @material-ui/lab
You need to install @mui/lab
and @mui/material
.
https://mui./material-ui/about-the-lab/#installation
npm install @mui/lab @mui/material
For yarn:
yarn add @mui/lab @mui/material
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./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
本文标签:
版权声明:本文标题:javascript - Module not found: Can't resolve '@material-uilabTabContext' in 'homesanikaDesktopCo 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742133342a2422261.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论