Search code examples
javascriptreactjsbrowserify

Cannot read 'component' of undefined: Using material-ui with browserify


I'm using browserify to manage my dependencies, as suggested on the material-ui setup doc. When I try to run my code, the console gives me this message:

Uncaught TypeError: Cannot read property 'component' of undefined, which is traced back to bundle.js:6769

In my bundle.js file, line 6769 is the return statement of this function:

    getThemeButton: function getThemeButton() {
        return this.context.muiTheme.component.button;
    },

What am I missing here? I have require statements for both material-ui and the material-ui components that I am using.

The top of my index.js file looks like this:

    var React = require('react');
    var injectTapEventPlugin = require('react-tap-event-plugin');
    var mui = require('material-ui');
    var RaisedButton = mui.RaisedButton;

    injectTapEventPlugin();

Solution

  • Found the answer hidden in the docs!

    Apparently this is a required part of material-ui (I don't know why they didn't include it as part of the set-up), but I needed to include this snippet in my rendered classes:

    childContextTypes: {
        muiTheme: React.PropTypes.object
    },
    
    getChildContext: function() {
        return {
          muiTheme: ThemeManager.getCurrentTheme()
        };
    },