CODEWITHSUNDEEP
javascriptreactjstransitionmaterial-ui
digory doo
digory doo

Reputation: 2311

material-ui: ReactTransitionGroup not defined

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!

Upvotes: 0

Views: 1924

Answers (2)

digory doo
digory doo

Reputation: 2311

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' });

Upvotes: 0

Jake Dluhy
Jake Dluhy

Reputation: 627

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.

Upvotes: 1

Related Questions