material-ui: ReactTransitionGroup not defined

Question

I'm trying to include material-ui in a React project that uses gulp/browserify. First I realized I had to navigate into the node_modules/material-ui directory and npm install there, to build the actual sources from the JSX files.

$ npm install material-ui --save
$ cd node_modules/material-ui
$ npm install

Next, I added the following lines to my project:

var React = require ('react/addons');
var e = document.getElementById ('react-mount-pt');
React.render (React.createElement (RootFrame.RootFrame, null), e);

RootFrame is a component that I wrote, does nothing fancy. It includes a subcomponent that tries to instantiate a component from material-ui like this:

var Mui = require ('material-ui');

/* further below, in render(): */

return React.createElement (Mui.RaisedButton ({ label: 'Default' }));

When I try to start my app, I get the error: "Uncaught TypeError: Cannot read property 'TransitionGroup' of undefined" in node_modules/material-ui/lib/dialog.js on the line containing:

var ReactTransitionGroup = React.addons.TransitionGroup;

When looking into the material-ui sources (https://github.com/callemall/material-ui/blob/master/src/dialog.jsx), the reason becomes obvious: Some lines above the offending line there is:

var React = require('react');

but as I am told it should rather require('react/addons') in order to be able to use TransitionGroup.

How am I supposed to use this library?

EDIT: From the official React site, https://facebook.github.io/react/docs/addons.html

When using the react package from npm, simply require('react/addons')  
instead of require('react') to get React with all of the add-ons.

material-ui doesn't do this, that's probably why I get this error.

In my main.js file, I added:

var React = require ('react/addons');
var ReactTransitionGroup = React.addons.TransitionGroup;

This piece of code is run first, and I get a non-null ReactTransitionGroup. Later when material-ui is required, material-ui requires ('react') and gets the version without the ReactTransitionGroup. Clearly a bug in material-ui, I'd say!

Are you requiring/including/importing the React library in any way in the file that you want to use the TransitionGroup? Btw. the amount of code you attached is to say the least not sufficient. — jalooc, Jul 20 '15 at 10:33
I don't really want to use the TransitionGroup; it's material-ui that appears to use it. The code that I showed is from material-ui itself, so you should see the full source code in any project that uses material-ui, or have a look at the GitHub sources. — digory doo, Jul 20 '15 at 12:32
I am using material-ui myself and it doesn't throw that error. For now I can say that `require('react')` is fine (as opposed to `require('react/addons')` you suggested), because `React.addons....` gets the addons. Anyway, I'll keep thinking about the solution. — jalooc, Jul 20 '15 at 13:03
Why do you `var React = require ('react/addons');` instead of `var React = require ('react');`? `React` should reference to React, not to addons. If React references to addons, then the code two lines later where you try invoking the `render()` function fails for sure. — jalooc, Jul 20 '15 at 19:05
Oh, and check if you `injectTapEventPlugin();', this is required by MUI: http://material-ui.com/#/get-started. — jalooc, Jul 20 '15 at 19:11
Requiring 'react/addons' simply adds the addons object to React and exports React: http://stackoverflow.com/questions/26965897/not-working-requirereact-addons — digory doo, Jul 21 '15 at 06:14
Sure, the injectTapEventPlugin is also needed, but this won't solve the problem above... — digory doo, Jul 21 '15 at 06:15

score 1 · Answer 1 · answered Jul 23 '15 at 04:27

So you're trying to use the button. You'll notice that this line var ReactTransitionGroup = React.addons.TransitionGroup; is the first line in the button file that can raise an error - everything else is just assignations. The problem is that material-ui is not properly loading in react; it has nothing to do with you requiring it.

For me this was because I forgot to add material-ui to my browserify bundle. In grunt my bundle looks like.

browserify: {
  vendor: {
    src: [],
    dest: 'public/assets/vendor.js',
    options: {
      require: ['react', 'react-router', 'material-ui']
    }
  },
  client: {
    src: ['frontend/**/*.js'],
    dest: 'public/assets/frontend.js',
    options: {
      transform: ['reactify'],
      external: ['react', 'react-router', 'material-ui']
    }
  }
},

Originally I didn't have 'material-ui' in the require. After I added it in it fixed this problem.

I made sure material-ui is in require and external, but I still get this error. :( — digory doo, Jul 24 '15 at 05:20
In fact, material-ui does load; it clearly is imported when I put a breakpoint at require('material-ui') and step through the calls. — digory doo, Jul 24 '15 at 05:30

score 0 · Accepted Answer · answered Jul 24 '15 at 06:37

OK, I finally got it working with the following hack: In my main.js, I do:

var ReactWithAddons = require ('react/addons');
var React = require ('react');
React.addons = ReactWithAddons.addons;

Also, I had to correct the obvious mistake:

return React.createElement (Mui.RaisedButton, { label: 'Default' });

material-ui: ReactTransitionGroup not defined

2 Answers2