Trying to use Material-UI in my components
bnopacheco opened this issue · comments
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;
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
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.
@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.
@xcv58 I upgraded react-explorer to modules.beta.7 and tested stateless component. Everything works fine. I copied exactly @maisumbruno 's code.
@sammkj I don't know why. Can you try mantra-sample-blog-app and apply the Material UI code?
@xcv58 do you have a repo that I can perhaps take a look?
@sammkj https://github.com/xcv58/mantra-sample-blog-app/tree/mui Can you try this one?
@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.
@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'
@xcv58 Did you npm install --save react-tap-event-plugin
?
@sammkj Of course, if I npm install
react-tap-event-plugin
and material-ui
, I get isNaN
error. Otherwise, get Cannot find module
error.
@xcv58 i had the same problem..fixed it by removing wallaby.js file
Cool, @yanivnizry +1
I struggled with this issues for hours. Removing wallaby.js was THE solution. I didnt use wallaby
anyway.
+1 @yanivnizry!!
Thank you!!!
+1 Thanks @yanivnizry
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
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
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
:)