2

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();
2
  • There's not enough code there to see the problem. Have you defined the 'contextTypes' for your component? Commented Jun 8, 2015 at 20:54
  • I was missing exactly that. Now it works :-) Commented Jun 8, 2015 at 21:58

1 Answer 1

2

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()
    };
},
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.