找不到模块：无法解析"D：\own_files\ReactTutorial\react-app\src"中的"@material-ui/core/Avatar"

Question

嗨，我刚刚用React启动了我的第一个应用程序。我使用的是一个简单的登录组件，在我使用npm启动后，它会抛出以下错误：找不到模块：无法解析"D:\own_files\ReactTutorial\react-app\src'"中的"@material-ui/core/Avator">

我有基本的React代码

这是我的App.js:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import GoodBye from './GoodBye';
import Hello from './Hello';
import NavigationBar from './NavigationBar';
import LoginComponent from './LoginComponent';
class App extends Component {
render() {
return (
<Router>
<div>
<NavigationBar />
<Route path="/hello" component={Hello} />
<Route path="/goodbye" component={GoodBye} />
<Route path="/login" component={LoginComponent} />
</div>
</Router>
);
}
}
export default App;

我的登录组件：

import React from 'react';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Box from '@material-ui/core/Box';
import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
function Copyright() {
return (
<Typography variant="body2" color="textSecondary" align="center">
{'Copyright © '}
<Link color="inherit" href="https://material-ui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const useStyles = makeStyles(theme => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignIn() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<form className={classes.form} noValidate>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={8}>
<Copyright />
</Box>
</Container>
);
}

Answer 1

您安装了Material UI吗？

npm install @material-ui/core

或者使用CDN？

https://material-ui.com/

Answer 2

Module not found: Can't resolve '@mui/icons-material/Add' in 'E:reacttutawesomeappsrc'

我也面临同样的问题。然后我用了：

import AddIcon from '@material-ui/icons/Add';

而不是

import AddIcon from '@mui/icons-material/Add';

Answer 3

将以下行添加到包中。json"依赖关系"；

"@material-ui/core": "4.10.0",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",
"@material-ui/pickers": "^3.2.10",

并执行命令yarn install或npm install