Material and Meteor

[jbremmer]

Is there any experience with using this with Meteor?

[hai-cea]

I don't have any experience with meteor. I know there's a react-meteor project, but it looks to be outdated. - https://github.com/reactjs/react-meteor

[jbremmer]

There is actually fresher one with 0.12.2 https://github.com/hipertracker/meteor-reactjs/blob/master/package.js but the way material is structured does not make it easy to use there.

So material and meteor is no dice right now.

[hellogerard]

I just tried using material-ui with https://github.com/mystor/meteor-routecore and am getting an error.

I added meteor-routecore in the normal way, using meteor add. I added material-ui using https://github.com/meteorhacks/npm/. In my app, I'm trying to use a component like this:

var mui = Meteor.npmRequire('material-ui')
  , Toolbar = mui.Toolbar;

App = React.createClass({
  render: function() {
    return (
        <Toolbar>
          <h3>Todos</h3>
        </Toolbar>
    );
  }
});

I'm getting this error in the console:

W20150220-17:13:03.225(-5)? (STDERR) Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
W20150220-17:13:03.227(-5)? (STDERR) Warning: Unknown DOM property class. Did you mean className?
W20150220-17:13:03.354(-5)? (STDERR) Error while rendering path: /
W20150220-17:13:03.354(-5)? (STDERR) TypeError: Cannot read property 'ref' of undefined
W20150220-17:13:03.354(-5)? (STDERR)     at [object Object].ReactComponent.Mixin.mountComponent (/Users/gerard/_work/talk-react-meteor/.meteor/local/isopacks/npm-container/npm/node_modules/material-ui/node_modules/react/lib/ReactComponent.js:255:37)
W20150220-17:13:03.354(-5)? (STDERR)     at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/gerard/_work/talk-react-meteor/.meteor/local/isopacks/npm-container/npm/node_modules/material-ui/node_modules/react/lib/ReactCompositeComponent.js:766:43)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].wrapper [as mountComponent] (/Users/gerard/_work/talk-react-meteor/.meteor/local/isopacks/npm-container/npm/node_modules/material-ui/node_modules/react/lib/ReactPerf.js:50:21)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].ReactMultiChild.Mixin.mountChildren (packages/mystor:routecore/react-with-addons-0.11.1.js:12230:1)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].ReactDOMComponent.Mixin._createContentMarkup (packages/mystor:routecore/react-with-addons-0.11.1.js:7793:1)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].ReactDOMComponent.Mixin.mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:7715:1)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:12718:1)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].ReactCompositeComponentMixin.mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:6560:1)
W20150220-17:13:03.355(-5)? (STDERR)     at [object Object].mountComponent (packages/mystor:routecore/react-with-addons-0.11.1.js:12718:1)
W20150220-17:13:03.355(-5)? (STDERR)     at packages/mystor:routecore/react-with-addons-0.11.1.js:13659:1

Everything works fine if I replace Toolbar with a normal div. Now, meteor-reactcore includes React, and material-ui includes React, and I believe they're different versions. Could that be the issue?

[tehfailsafe]

https://github.com/reactjs/react-meteor is back and being supported by Ben Newman, formerly of Facebook and now MDG team. The https://github.com/hipertracker/meteor-reactjs repo was forked from this a few months ago and updated to current react version, but is now outdated with a few features being added to react-meteor like component level subscriptions.

All that aside, I can't get material-ui to work either. Meteorhacks https://github.com/meteorhacks/npm/ only provides npm requirements for things running on the server, so anything accessed in the client will return undefined.

I'm not sure how to browserify into a meteor project...

[grigio]

Now there is also grovelabs:react by @lourd

I hope will be possible to install this project in Meteor without forking

[ccorcos]

This is also being talked about here.

Would it be possible to build a script that can be included in the head? Check out how they do it here.

[rkstar]

anyone able to package this for meteor? i love react + meteor and the material-ui components make so much more sense than materializecss.

[lourd]

Unfortunately this is part of a much bigger question, which is npm packages on the client in Meteor. The Meteor build system is awesome in many ways, but there's no good/easy way to use libraries built for npm and tools like browserify, webpack, broccoli, gulp, etc. That meteorhacks:npm package is only for on the server, because it's a clever trick of using Npm.depends in a package

But a hacky way of getting it to work right now is what we want! :smile: Step 1: finding out what this build script does. I haven't used browserify before, I'll report back but definitely try it yourself as well

[lourd]

Also did a quick check on the forums for active discussions: found this thread where someone mentioned this meteor package which is using mizzao:build-fetcher to load in browserify-loader. That package looks like it does XHR to go fetch the files after loading, not at build time which is what you want.

[lourd]

I've got the Javascript imports working https://github.com/lourd/meteor-browserify

main.js requires React and material-ui and exposes them globals. Meteor picks up the bundle.js file without a problem. This doesn't load in any of the stylesheets of course

[lourd]

But it does now! :laughing: using our grove:less package I have a main.less file in the root that lists out the imports

@material-ui: "../node_modules/material-ui/src/less";
@import "@{material-ui}/scaffolding.less";
// put custom import here
@import "@{material-ui}/components.less";

And they're brought in just fine, verified by checking the CSS delivered to the client.

[grigio]

Nice, so you are able to inherit material-ui components and compose higher level ones with grove:react and grigio:babel ?

[lourd]

The repo actually doesn't using either. Using browersify on the node_modules installed by doing npm install material-ui includes React and post-JSX compilation components so they're not needed

[lourd]

Or maybe I should say *not yet. It's strictly at tech hack stage, to do anything with the available imports you'll probably want to use grigio:babel for JSX compiling. Using grove:react will double-load React though...

[ccorcos]

Wait, so you got browserify working?!

[lourd]

Haha, no, not fluidly. Just including the output from browserify as one big file in the Meteor app

[ukabu]

For those feeling adventurous, I just published ukabu:material-ui@0.8.0-alpha on Atmoshpere. It should work on server and client (including cordova).

Note that this is based on master and so uses inline styles for the components. Currrently, there is no reset CSS so some things may look a bit odd. You also have to make sure to use the theme manager properly (https://github.com/callemall/material-ui/issues/30#issuecomment-97281230).

It also need reactjs:react to include a fix (https://github.com/reactjs/react-meteor/pull/74). Until it's merged, you'll have to clone it, patch it and use it locally.

[grigio]

I tried with cosmos:browserify and it works. Unfortunatly the provided CSS styles seems to not be loaded.

UPDATE: I wrote a post about it http://grigio.org/meteor-react-and-material-ui-the-easy-way/

[stubailo]

Hey, here's a super simple example app: https://github.com/meteor/react-packages/tree/master/examples/material-ui-leaderboard

[mbrookes]

material-ui works fine with Meteor, so this issue can presumably be closed, as the problems now are largely with material-ui's idiosyncratic API, and bugs, rather than any specific incompatibility.

[github-actions[bot]]

👋 Thanks for using MUI Core!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support, please check out https://mui.com/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others. If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.