Using meteor-reactjs with 3rd party components?

[sunny-g]

What's the recommended way of using 3rd party React components alongside meteor-reactjs?

I'm trying to use https://gitub.com/callemall/material-ui, but kept getting the "Uncaught TypeError: Cannot read property 'firstChild' of undefined".

So far, I include material-ui by running npm install && gulp build in a hidden folder that reactify's the dependencies into a single file and puts it in client/compatibility, which loads the library as expected, but results in the aforementioned error. In the simple example of just rendering a RaisedButton, it prevents the rippling animation from being triggered though on hover, the button changes.

edit: this issue might also be related: mui/material-ui#331

[tehfailsafe]

You're further along than I am, I can't get it to load at all... Can you shed some light into what is in the hidden folder you're building? I can't seem to get a bundle.js out of it without including the example code as well

[sunny-g]

Sure, I detailed this in a stackoverflow post here, which links to this part of my repo.

[hipertracker]

Meteor has simple but crappy file downloader. All files are loaded to global namespace, the order of loading is controlled by file names. And there are no modules. It can use npm packages but it cannot use 'require' command.

[hipertracker]

To use third party npm modules, you have to wrap them in Meteor packages.

[matthewsimo]

Just to chime in you can also check out the https://github.com/meteorhacks/npm meteor package, it enables you to use npm modules in your app without needing to build a package wrapper.

[tehfailsafe]

That was my first go to attempt, but if you read closer the NPM modules only work on the server, which was giving me lots of uknown symbol < JSX errors. Trying to call React.createClass on the client side just gave unknow variable React errors.

React needs to be used on the isClient, unless I'm missing something?

[hipertracker]

React can be used everywhere, on the server, or on the client. That's the whole point of having isomorphic web app.

And npm modules are for Node, not for the browser, so this is server side technology. To bring it to the client you need to use special tools, like jspm or browserify. Or you can wrap them as Meteor's smart packages.

[hipertracker]

https://github.com/meteorhacks/npm is server side only

[tehfailsafe]

I was just saying I tried meteorhacks package and couldn't figure out how to make it work.

All I'm trying to do is get https://gitub.com/callemall/material-ui working with meteor, but it's built for a gulp w/ browserify workflow that I'm not sure how to implement on top of meteor. There's an open ticket on their repo as well, without a solid answer. mui/material-ui#331

I would happily wrap this up in a package but I'm not sure how to do so. I went from rails to meteor and skipped over node / common / browserify stuff. Material-ui is setup as a node module that has dependancies on react/browserify/reactify etc, and uses gulp to bundle them all up including your app source into one file.

With meteor we need the "raw" pieces and let meteor do the bundling for us, but then it doesn't seem to wrap them correctly with browserify jsx transforms etc. I've tried grabbing the example material-ui files, stripping out all app specific code, bundling that up and putting in the client folder, but that throws a bunch of errors I don't understand, so I'm not sure how to correct.

[matthewsimo]

Yea, I wasn't thinking and forgot that caveat with the meteorhacks:npm package. I think a tool could be built to make adding stuff like this easy but wrapping them in a meteor package like @hipertracker suggests is the best bet for now..

[ukabu]

You can look at my take in creating https://github.com/ukabu/material-ui (available on Atmoshepere).

The core of making it work, was to create standalone bundles using Browserify. Since we can't run scripts when adding the Meteor package, I had to commit the generated bundles in git. To make it easier I added a script build:meteor to the npm package. So whenever I update from upstream, I can run npm run build:meteor to get updated bundles and then commit them to git.

Then it's just a matter of properly exporting the objects. This is a bit different on the client and the server as Browserify standalone bundle will add the object to either window or global.