TypeError: Cannot read properties of undefined (reading 'up')

Question

I am following a tutorial from 10 months back on youtube to create an ecommerce store. I am getting this weird error

It is failing in this styles.js file

import { makeStyles } from '@mui/styles';
import { alpha } from '@mui/material/styles';

const drawerWidth = 0;

export default makeStyles((theme) => ({
  appBar: {
    boxShadow: 'none',
    borderBottom: '1px solid rgba(0, 0, 0, 0.12)',
    [theme.breakpoints.up('sm')]: {
      width: `calc(100% - ${drawerWidth}px)`,
      marginLeft: drawerWidth,
    },
  },
  title: {
    flexGrow: 1,
    alignItems: 'center',
    display: 'flex',
    textDecoration: 'none',
  },
  image: {
    marginRight: '10px',
  },
  menuButton: {
    marginRight: theme.spacing(2),
    [theme.breakpoints.up('sm')]: {
      display: 'none',
    },
  },
  grow: {
    flexGrow: 1,
  },
  search: {
    position: 'relative',
    borderRadius: theme.shape.borderRadius,
    backgroundColor: alpha(theme.palette.common.white, 0.15),
    '&:hover': {
      backgroundColor: alpha(theme.palette.common.white, 0.25),
    },
    marginRight: theme.spacing(2),
    marginLeft: 0,
    width: '100%',
    [theme.breakpoints.up('sm')]: {
      width: 'auto',
    },
  },
  searchIcon: {
    padding: theme.spacing(0, 2),
    height: '100%',
    position: 'absolute',
    pointerEvents: 'none',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  inputRoot: {
    color: 'inherit',
  },
  inputInput: {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding + font size from searchIcon
    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
    transition: theme.transitions.create('width'),
    width: '100%',
    [theme.breakpoints.up('md')]: {
      width: '20ch',
    },
  },
}));

I know that material ui migrated recently and wondering if thats the issue. I exhausted everything on google and there is nohelp. The issue seems to be with breakpoints.

Can someone help?

You probably need to `createTheme` and wrap your components inside `ThemeProvider`. See [this](https://stackoverflow.com/a/69508854/9449426) answer for more detail. — NearHuscarl, Oct 14 '21 at 16:58
hey I am still struggling with this. I think the basic problem is that I am new to react and my learning curve of the existing material-ui coincided with the new launch and now everything is a mess in my head. What do you suggest I do? While conceptually I am aware of the problem, but in practice its just not making sense. Can you help? — Sandy, Oct 16 '21 at 07:17
If you're starting a new project, you should ditch the `makeStyles` API in favor of `styled`/`sx` prop. `makeStyles`/`withStyles` is deprecated and might be removed in the future. You can put your code on codesandbox if you still have the error, that way I can open the link and see immediately myself and you'll get helped a lot faster that way. — NearHuscarl, Oct 16 '21 at 12:26
There are a lot of breaking changes in v5 as mentioned in this [guide](https://mui.com/guides/migration-v4/#main-content), make sure you have a look at it. — NearHuscarl, Oct 16 '21 at 12:27

TypeError: Cannot read properties of undefined (reading 'up')

0 Answers0