Material-ui error (Missing class properties transform.) - meteor

Question

I have been trying to set the material-ui theme in Meteor with react-mounter to mount the components.
I was having issues setting it then I extended the component so that I could set the theme using the examples on the material-ui site.
I now get the following error message.
client/components/navbar.jsx:14:4: /client/components/navbar.jsx: Missing
class properties transform.
Here is the navbar sample code
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class Navbar extends React.Component {
childContextTypes: {
muiTheme: React.PropTypes.object.isRequired
}
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
render() {
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
}
export default Navbar;
Here is the router.jsx
import React from 'react';
import {mount} from 'react-mounter';
import {MainLayout} from '/client/layouts/mainLayout.jsx';
import Content from '/client/components/content.jsx';
import Navbar from '/client/components/navbar.jsx';
import Footer from '/client/components/footer.jsx';
FlowRouter.route("/", {
action () {
mount(MainLayout, {
navbar: <Navbar/>,
content: <Content/>,
footer: <Footer/>
});
}
});

Answer 1

You need a Babel transform. Meteor 1.3.3+ supports additional plugins and presets via .babelrc
Install the static transform:
npm install babel-plugin-transform-class-properties
# .babelrc
{
"presets": [
"meteor",
"es2015",
"stage-1"
],
"plugins": [
"transform-class-properties"
]
}
Support in Meteor 1.3.3
The transform

Answer 2

I changed it from extending the class too React.createClass and it now works.
import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import Navigationclose from 'material-ui/svg-icons/navigation/close';
import IconMenu from 'material-ui/IconMenu';
import NavigationMoreVert from 'material-ui/svg-icons/navigation/more-vert';
import MenuItem from 'material-ui/MenuItem';
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
var Navbar = React.createClass({
childContextTypes: {muiTheme: React.PropTypes.object},
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
},
navigate(event, index, item) {
console.log('navigate', item);
FlowRouter.go(item.route);
},
getMenuItems() {
console.log('navigate1');
return [
{ route: '/', text: 'Home' },
{ route: '/table', text: 'Table' }
];
},
render() {
console.log('Render');
return (<AppBar
title="Title"
iconElementLeft={<IconButton><Navigationclose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><NavigationMoreVert /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh"/>
<MenuItem primaryText="Help"/>
<MenuItem primaryText="Sign out"/>
</IconMenu>
}
/>);
}
});
export default Navbar;