Trying to use Material-UI in my components

[Bruno Pacheco]

I am new to Mantra and Meteor. I'm trying to use 'material-ui' in my components, but have not been successful. Can you help me?

Example:

import React from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';
import RaisedButton from 'material-ui/lib/raised-button';

injectTapEventPlugin();

const Navigation = () => (

    <RaisedButton label="Hello" />

);

export default Navigation;

[xcv58]

You can open your console. In my browser, it shows:

dangerousStyleValue.js:44 Uncaught TypeError: isNaN is not a function

The reason is that React use isNaN() to check dangerous style values. https://github.com/facebook/react/blob/81e41ae1b1d9a7dda489c95d2154cb7f0e748980/src/renderers/dom/shared/dangerousStyleValue.js#L46

But in ES2015, isNaN() is not a function anymore, we should use Number.isNaN().
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN

[Daniel Sam]

I have not tried using Material UI with stateless component. But so far I have been using MUI with React.Component with no problems. You can check out react-explorer. It uses MUI.

[xcv58]

@sammkj The react-explorer uses METEOR@1.3-modules-beta.4
And this repo is under METEOR@1.3-modules-beta.6
I'm not sure whether the different versions cause this issue.

[Daniel Sam]

@xcv58 I upgraded react-explorer to modules.beta.7 and tested stateless component. Everything works fine. I copied exactly @maisumbruno 's code.

[xcv58]

@sammkj I don't know why. Can you try mantra-sample-blog-app and apply the Material UI code?

[Daniel Sam]

@xcv58 do you have a repo that I can perhaps take a look?

[xcv58]

@sammkj https://github.com/xcv58/mantra-sample-blog-app/tree/mui Can you try this one?

[Daniel Sam]

@xcv58 It looks like you have material-ui and react-tap-event-plugin as your devDependencies. I moved that to dependencies and everything works fine.

[xcv58]

@sammkj If I remove the material-ui and react-tap-event-plugin as from devDependencies. Sure it can build, but when you open web page in browser. It'll show empty page with Uncaught Error: Cannot find module 'react-tap-event-plugin'

[Daniel Sam]

@xcv58 Did you npm install --save react-tap-event-plugin ?

[xcv58]

@sammkj Of course, if I npm install react-tap-event-plugin and material-ui, I get isNaN error. Otherwise, get Cannot find module error.

[Yaniv Nizry]

@xcv58 i had the same problem..fixed it by removing wallaby.js file

[Ulrich Diedrichsen]

Cool, @yanivnizry +1

I struggled with this issues for hours. Removing wallaby.js was THE solution. I didnt use wallaby
anyway.

[Bruno Pacheco]

+1 @yanivnizry!!
Thank you!!!

[xcv58]

+1 Thanks @yanivnizry

[Arunoda Susiripala]

Thanks all. I just change the way how we write the wallaby.js file and fixed this see.
See: https://github.com/mantrajs/mantra-sample-blog-app/blob/master/wallaby.js

[Reggie Pangilinan]

Hello I am also trying to use material-ui with mantra. I find mantra really interesting so i gave it a try.
I was able to render my container and components and hook it up to actions. But i see this weird error message in my dev console

Below is the screenshot

It seems like react cannot recognize some props
I am not sure if i miss something in the mantra configuration or react itself.

Btw here are my codes

//Component
//React

import React from 'react';

//Material-UI
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

export default class Login extends React.Component {

    login(event) {
        if (event && event.preventDefault) {
            event.preventDefault();
        }

        const {login} = this.props;
        login('username', 'password');
    }

    render() {
        return (
            <div className="login-content-wrapper">
                <form onSubmit={this.login.bind(this) }>
                    <h1>Login Page</h1>
                    <TextField
                        hintText="Enter your email"
                        floatingLabelText="Email"
                        />
                    <TextField
                        hintText="Enter your password"
                        floatingLabelText="Password"
                        type="password"
                        />
                    <RaisedButton type="submit" className="login-button" label="Login" primary={true}/>
                </form>
            </div>
        );
    }
}

//Container

import Login from '../components/Login.jsx';
import {useDeps, composeWithTracker, composeAll} from 'mantra-core';

export const composer = ({context, login}, onData) => {
    onData(null, 'from onData');
};
export const depsMapper = (context, actions) => ({
    login: actions.login.login,
    context: () => context
});


export default composeAll(
    composeWithTracker(composer),
    useDeps(depsMapper)
)(Login);

here are my npm dependencies

  "dependencies": {
    "mantra-core": "^1.7.0",
    "material-ui": "^0.15.1",
    "meteor-node-stubs": "~0.2.0",
    "react": "^15.2.0",
    "react-dom": "^15.2.0",
    "react-router": "^2.5.2",
    "react-tap-event-plugin": "^1.0.0"
  }

UPDATE

I found the issue and it is related to a bug in react 15.2.0
facebook/react#7163

I downgraded for to 15.1.0 and the warning disappeared
:)