Drawers demo error Uncaught TypeError: Cannot read property '@global'

[the-noob]

Trying the Drawer examples causes an error:

index.js:125 Uncaught TypeError: Cannot read property '@global' of undefined
    at handleNestedGlobalContainerRule (index.js:125)
    at Array.onProcessRule (index.js:186)
    at PluginsRegistry.onProcessRule (PluginsRegistry.js:55)
    at Array.forEach (<anonymous>)
    at RuleList.process (RuleList.js:137)
    at new StyleSheet (StyleSheet.js:43)
    at Jss.createStyleSheet (Jss.js:85)
    at withStyles.js:270
    at Array.forEach (<anonymous>)
    at Style.attach (withStyles.js:241)
    at Style.componentWillMount (withStyles.js:205)
    at ReactCompositeComponent.js:347

This seems to be caused by drawerHeader: theme.mixins.toolbar, in the styles definition (works if I take that one out).

I do have a provider at root:

const theme = createMuiTheme();

ReactDOM.render(
  <Provider appStore={appStore} >
    <MuiThemeProvider theme={theme}>
      <Router history={routerStore.history}>
        <App />
      </Router>
    </MuiThemeProvider>
  </Provider>,
  document.getElementById('root'),
);

Your Environment

Tech	Version
Material-UI	1.0.0-beta.16 (same in .13)
React	15.6.2
browser	any

[oliviertassinari]

There is no @global style definition in the theme.mixins.toolbar.
https://github.com/callemall/material-ui/blob/3fb316bc9aacdb8a8bca481c89b1dd1a8f04a5f5/src/styles/createMixins.js#L14-L22

Sorry, but I have no clue. I can't help without a reproduction example.

[the-noob]

In case anyone else has similar issues...
While trying to replicate with a smaller example I've just deleted node_modules folder and npm install again and then it worked :(

[clementblaudeauEarthCube]

I have the same problem but your solution doesn't work for me... I"ll try to create a small example

[clementblaudeauEarthCube]

Ok the problem is basically the following : you have a style object used by withStyles(styles). If your object is incorrect, say

const style = theme => ({foo:null});

Then it causes the problem

[RalphSimon]

Following @clementblaudeauEarthCube 's hint on malformed objets, I tried the following:

const styles = theme => {
  return {
    toolBar: {...theme.mixins.toolBar},
    drawerPaper: {
      width: drawerWidth,
      [theme.breakpoints.up("md")]: {
        position: "relative"
      }
    },
    content: {
      flexGrow: 1,
      backgroundColor: theme.palette.background.default,
      padding: theme.spacing.unit * 3,
    },
  }
};

I'm using create-react-app, so object-rest-spread is enabled by default. This workaround helped for me. But I have no clue as to why theme.mixins.toolBar doesn't return a proper object.

[johannwagner]

I also ran into this bug.
It seems, that this happens due to different material-ui versions, which are installed.
This happens, if the css-modules prefix is inconsistent.

In my case, this happend, as I linked a lib, which is developed by myself into an existing project with material-ui:3.1.2

[oliviertassinari]

I have faced this issue too last week at the office. It was linked to a theme issue between two versions of Material-UI installed. I had to inject the right theme in the React tree. I have opened an issue on JSS side: cssinjs/jss#899.

[AmineS]

@oliviertassinari How did you inject the right theme in the React tree? I've run into the same issue. I'm pulling Material UI version 3.3 and a dependency is pulling 1.3.1.
Merci!

[oliviertassinari]

@AmineS Use the theme provider.

[AmineS]

Thanks Olivier!

[maicWorkGithub]

@oliviertassinari I occurred this problem those days, and use theme provider not solve my problem, or I made some mistakes? here is my demo.

And I saw issue cssinjs/jss#899 is marked solved, but they recently released is alpha, is there a plan material-ui use the bug solved jss?

Thank you very much, for your work!!