Material-UI with React.js

react
1

I really want to use Material-UI with my project, but just can’t figure out how.

The available packages use reactjs:react and I want to use just react.

Is anyone using this combination?

2

I’m also looking at it, there’re very limited resources you can reference.
I saw https://github.com/reactjs/react-meteor, and https://github.com/meteor/react-packages and I know Meteor 1.2 will support reactjs natively, I don’t know if the current meteor - react integration method (depend on cosmos:browserify, meteorhacks:npm) is the final supported approach.

3

I just spent all day trying to get them (react and material ui) to work together yesterday. It turns out there is an issue with the react package that makes it incompatible (for the time being) with material ui. In the end I followed this post and got it to work: http://grigio.org/meteor-react-and-material-ui-the-easy-way/.

Well, it partly works. Still having issues with some components.

There are some helpful examples here built with material ui: https://github.com/meteor/react-packages

3 Likes
4

oh those are some good links. looking into it.

5

So I thought the examples were clear enough and wanted to create a package. Got stuck.

The idea is to require() MUI into the client side using browserify. For some reason though when processing the browserify.js file the client gets error Uncaught TypeError: Cannot read property 'require' of undefined.

If anyone would like to have a look then clone this repo and run Meteor in the demo folder: https://github.com/KristerV/meteor-material-ui

6

Here’s an example project that uses material UI and works: https://github.com/meteor/react-packages/tree/master/examples/material-ui-leaderboard

1 Like
7

while trying this example, I want to know how can I require a self exported module?

8

Elaborate?

If you mean, export a module from a file in your app and then import it from a different file in your app, that is currently not possible. I am tracking it in an issue here: ES2015 and CommonJS module support · Issue #65 · meteor/react-packages · GitHub

It’s a top-priority issue.

9

yeah, i’ve seen and studied that repo. Difference is I’m trying to make a package. Somehow packages work differently.

10

At this point I’m documenting my progress for whoever may need it

So I got passed the “require” command not working by moving the app.browserify.options.json file into the lib folder.

api.addFiles(['lib/mui.browserify.options.json', 'mui.browserify.js'], 'client');

For some reason when I also move the other file the same error reappears. I guess options need to be loaded before the actualy browserify file.

Now I’m struggling with errors:

Warning: owner-based and parent-based contexts differ (values: `undefined` vs `[object Object]`) for key (muiTheme) while mounting TextField (see: http://fb.me/react-context-by-parent)

Uncaught TypeError: Cannot read property 'component' of undefined

I would guess it’s something to do with

var App = React.createClass({
  childContextTypes: {
    muiTheme: React.PropTypes.object
  },

  getChildContext: function() {
    return {
      muiTheme: ThemeManager.getCurrentTheme()
    };
  },
11

I used to get that error. It was because React was loaded twice (I think it was due of some issue when using the “react” package with Material UI). Don’t know if that’s the case with you though?

12

yep sounds like you’re right. I found a topic about this issue on GitHub too. The issue itself seems to have been fixed, but for some reason it has arisen again in my case. Must be something to do with packages.

1 Like
13

It’s possible that this is a bug. What are you trying to build? I’ll try to find out why it doesn’t work.

14

I’ve actually created a package for MUI and made a very minimal app to go with it for testing, I bet it’ll be easy to work with. Clone this repo and run Meteor on the “/demo” dir. It’s symlinked to use the material-ui package from “/package” dir.

Thanks for the help, @sashko.

Edit: ooh, you are “stubailo” from that GitHub topic. Didn’t piece those together :slight_smile:

1 Like
15

I pulled down the react-packages locally, but I can’t seem to run any of them. Am I missing something basic here?

16

You don’t need to pull them locally. Just run meteor add react. They are already published.

17

sounds like downloading stuff, like it’s the 90’s :slight_smile:

18

I meant the example projects inside of that react-packages repo on github. I was expecting to be able to just run it as is with the meteor command…

19

You don’t store any projects locally on your machine?

20

ooh right. no of course that’s normal :smile:

You need to run meteor in a directory that has a .meteor folder in it (it’s hidden). Then it’ll work.