Creating a new theme with Material-ui Version 5 with react version 18.01 - Error using '@mui/styles'

Question

I'm using react V.18.01 and Material-ui v.5, and my application is giving me a error explained below, I would like a code review, once that I'm a beginner dev please. I'm following this video to build my application. https://www.youtube.com/watch?v=xIIJfmDnvPE&ab_channel=TheNetNinja Question: How to solve the issue of @mui/styles on import? What is happening here?

ERROR in ./src/App.js 8:0-41

Module not found: Error: Can't resolve '@mui/styles' in '/home/flavio/CashFlowBr/cashflowbr/src'

ERROR in ./src/pages/Banks.js 11:0-41

Module not found: Error: Can't resolve '@mui/styles' in '/home/flavio/CashFlowBr/cashflowbr/src/pages'

I'm pasting my codes of the files, where should happens the changes.

import Notes from './pages/Notes';
import Banks from './pages/Banks';
import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { makeStyles } from '@mui/styles';
import { styled } from '@mui/styles';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
    palette: {
      primary: {
        type: 'ligth',
        main: '#fefefe',
      },
      secondary: {
        main: '#f50057',
      },

    },
    props: {
      MuiTooltip: {
        arrow: true,
      },
    },
      typography: {
        fontFamily: 'Quicksand',
        fontWeigthLigth: 400,
        fontWeigthRegular: 500,
        fontWeigthMedium: 600,
        fontWeigthBold: 700,
      }
 
})


class App extends React.Component{
    render(){
      return(
        <ThemeProvider theme={ theme }>
          <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Notes}/>
            <Route path="/bancos" component={ Banks }/>
          </Switch>
         </BrowserRouter>
        </ThemeProvider>
      )
    }
};

export default App;
 

import React, { useState } from 'react';
import { Typography } from '@mui/material';
import { Button } from '@mui/material';
import { Container } from '@mui/material';
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
import { makeStyles } from '@mui/styles';
import { blue } from '@mui/material/colors';
import { TextField } from '@mui/material';
import { createTheme } from '@mui/material/styles';

const theme = createTheme();
const useStyles = makeStyles((theme) ({
    field: {
        margimTop: 20,
        margimBottom: 20,
        display: "block",
    }
    
}));

export default function Bancos(){
    const classes = useStyles()
    const [name, setName] = useState('')
    const [address, setAddress] = useState('')
    const [nameError, setNameError] = useState(false)
    const [addressError, setAddressError] = useState(false)

    const handleSubmit = (e) => {
        e.preventDefault()
        setNameError(false)
        setAddressError(false)

        if(name == ''){
            setNameError(true)
        }

        if(address == ''){
            setAddressError(true)
        }

        if( name && address){
            console.log(name,address)
        }
    }

    return(
        <Container>
           <Typography  variant="h6" color="textSecondary" align="center" gutterBottom>
               Cadastrar um novo Banco
           </Typography>

            <form noValidate autoComplete="off" onSubmit={handleSubmit}>
                <TextField label="Nome do Banco" variant="outlined" color="secondary"
                fullWidth required className={classes.field} 
                onChange={(e) => setName(e.target.value)} error={nameError}/>
                 <TextField label="Endereço" variant="outlined" color="secondary"
                fullWidth required className={classes.field} 
                onChange={(e) => setAddress(e.target.value)} error={addressError}/>

                <Button type="submit" variant="contained" color="primary"
                 endIcon={<KeyboardArrowRightIcon />} 
                >
                 Salvar
                </Button>
            </form>

           
        </Container>
    )
}

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Console log error:

index.js:16 Uncaught Error: Cannot find module '@mui/styles'
    at webpackMissingModule (index.js:16:1)
    at Module../src/pages/Banks.js (index.js:16:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/App.js (interopRequireDefault.js:7:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at Module../src/index.js (App.js:51:1)
webpackMissingModule @ index.js:16
./src/pages/Banks.js @ index.js:16
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.js @ interopRequireDefault.js:7
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ App.js:51
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
localhost/:1 Error while trying to use the following icon from the Manifest: http://localhost:3000/logo192.png (Download error or resource isn't a valid image)

Answer 1

My first reaction would be to make sure that I'd installed the dependencies correctly - try running either yarn or npm i (depending on your project) and check the output in the terminal doesn't show any errors.

Update: I checked the source repo of the YouTube link you posted and it doesn't have @mui listed in the package.json originally. I haven't watched the video, but I would guess that there is a step to run something like npm install @mui/material @emotion/react @emotion/styled which you haven't done, so the module isn't installed and available yet.