v5.0.0-beta.1 - makeStyles : TypeError: Cannot read property 'drawer' of undefined

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

This piece of code was working on v4 :

// Used to work in v4 : import { makeStyles } from '@material-ui/core/styles';
import {makeStyles} from '@material-ui/styles';

// A style sheet
const drawerWidth = 150;
export default makeStyles(theme => ({
    root: {
        display: 'flex',
    },
    appBar: {
        zIndex: theme.zIndex.drawer + 1,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
    },
    appBarShift: {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    menuButton: {
        marginRight: 36,
    },
    hide: {
        display: 'none',
    },
    drawer: {
        width: drawerWidth,
        flexShrink: 0,
        whiteSpace: 'nowrap',
    },
    drawerOpen: {
        width: drawerWidth,
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.enteringScreen,
        }),
    },
    drawerClose: {
        transition: theme.transitions.create('width', {
            easing: theme.transitions.easing.sharp,
            duration: theme.transitions.duration.leavingScreen,
        }),
        overflowX: 'hidden',
        width: theme.spacing(7) + 1,
        [theme.breakpoints.up('sm')]: {
            width: theme.spacing(9) + 1,
        },
    },
    toolbar: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'flex-end',
        padding: theme.spacing(0, 1),
        // necessary for content to be below app bar
        ...theme.mixins.toolbar,
    },
    content: {
        flexGrow: 1,
        padding: theme.spacing(3)
    },
}));

When trying to run my app using npm start , I got this :

Expected Behavior 🤔

It should work as the only required change was to fix the import for v5 (as described here) (and theme object still has the needed field : https://next.material-ui.com/customization/default-theme/#main-content )

Steps to Reproduce 🕹

Steps:

1. Git clone my repository : git clone https://github.com/jy95/yt_gaming_library.git
2. Checkout the branch “updates” : git checkout updates
3. Run the app : npm start

Context 🔦

Trying to move my codebase to v5 😉

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 12.14.0 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.13.6 - D:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67)   
  npmPackages:
    @emotion/react: ^11.4.0 => 11.4.0 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @material-ui/core: ^5.0.0-beta.1 => 5.0.0-beta.1 
    @material-ui/data-grid: ^4.0.0-alpha.33 => 4.0.0-alpha.33 
    @material-ui/icons: ^5.0.0-beta.1 => 5.0.0-beta.1         
    @material-ui/lab: ^5.0.0-alpha.40 => 5.0.0-alpha.40
    @material-ui/private-theming:  5.0.0-beta.1
    @material-ui/styled-engine:  5.0.0-beta.1
    @material-ui/styles: ^5.0.0-beta.1 => 5.0.0-beta.1
    @material-ui/system:  5.0.0-beta.1
    @material-ui/types:  6.0.1
    @material-ui/unstyled:  5.0.0-alpha.40
    @material-ui/utils:  5.0.0-beta.0
    @types/react:  16.9.55
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

[CamDavidsonPilon]

Hi, I’m getting a similar problem in my project. I’m using the latest material-ui v5 versions, and have put ThemeProvider at the highest level, and I believe the correct imports:

https://github.com/Pioreactor/pioreactorui/blob/0482c8ec8e959573fc4db536a615abfccfe543fa/client/src/App.jsx#L3

https://github.com/Pioreactor/pioreactorui/blob/0482c8ec8e959573fc4db536a615abfccfe543fa/client/src/components/SideNavAndHeader.jsx#L2

But I’m getting an error in my Sidebar component, note that it is within the ThemeProvider.

[siriwatknp]

@CamDavidsonPilon I checked, the code looks fine but your package.lock is not. please delete your package.lock and node_modules then npm install again. (it works on my machine)