Not working with "browser" nor "browserify-shim" configs

[YChebotaev]

I want to replace a default material-ui's react dependencty to a prebuild by facebook version of minified react.

I have following error:

Uncaught TypeError: Cannot read property 'component' of undefined in function in a Paper class:

getStyles: function getStyles() {
    var styles = {
      root: {
        backgroundColor: this.context.muiTheme.component.paper.backgroundColor,
        transition: this.props.transitionEnabled && Transitions.easeOut(),
        boxSizing: 'border-box',
        fontFamily: this.context.muiTheme.contentFontFamily,
        WebkitTapHighlightColor: 'rgba(0,0,0,0)',
        boxShadow: this._getZDepthShadows(this.props.zDepth),
        borderRadius: this.props.circle ? '50%' : this.props.rounded ? '2px' : '0px'
      }
    };
    return styles;
  },

this.context.muiTheme variable inside this function is undefined.

It breaks only when i'm trying to use different react build.

I use browserify as module bundler and at first i was try a following config in package.json:

  "browser": {
    "react": "./node_modules/react/dist/react.min.js"
  }

I'm also trying to use browserify-shim without success.

[super-cache-money]

I've used this lib with browserify and browserify-shim. It sounds like you have two versions of react in the browser. Maybe check your bundle?

In my root's package.json, I had:

"browserify-shim": {
  "react": "global:React",
  "react/addons": "global:React",
}

Also, since material-ui will be in _nodemodules, you'll need to specify browserify-shim as a global transform:

b = require('browserify')();
b.transform(require('browserify-shim'), {global: true});

[YChebotaev]

I have edit my config as following:

"browserify-shim": {
    "react": "global:React",
    "react/addons": "global:React"
  },
  "browserify": {
    "transform": [
      ["babelify", {"stage": 0}],
      "reactify",
      ["browserify-shim", {"global": true}]
    ]
  }

And this is not working: i'm have entire react bundled with my app.

[xueruini]

1. You should use ReactWithAddon.js in your browser.
2. {"global": true} for shim only works with programming API. (http://github.com/thlorenz/browserify-shim/issues/191)

[shaurya947]

@YChebotaev were you able to get this to work? Trying to see if I can close this issue.

[alitaheri]

react is now a peer dependency.