Module not found: Can't resolve 'material-ui/FlatButton - react-redux

Question

I got the following error:
/src/Components/Home/post.jsx
Module not found: Can't resolve 'material-ui/FlatButton' in /Users/apple/Documents/dev/source/sm-ui/servicemonster-ui
I tried to install material-ui but it failed. How can I fix this?
post.jsx:
import React from 'react';
import {Card, CardActions, CardHeader, CardMedia, CardTitle, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
export default class CardExampleControlled extends React.Component {
constructor(props) {
super(props);
this.state = {
expanded: false,
};
}
handleExpandChange = (expanded) => {
this.setState({expanded: expanded});
};
handleToggle = (event, toggle) => {
this.setState({expanded: toggle});
};
handleExpand = () => {
this.setState({expanded: true});
};
handleReduce = () => {
this.setState({expanded: false});
};
render() {
return (
<Card expanded={this.state.expanded} onExpandChange={this.handleExpandChange}>
<CardHeader
title="URL Avatar"
subtitle="Subtitle"
avatar="images/ok-128.jpg"
actAsExpander={true}
showExpandableButton={true}
/>
<CardText>
<Toggle
toggled={this.state.expanded}
onToggle={this.handleToggle}
labelPosition="right"
label="This toggle controls the expanded state of the component."
/>
</CardText>
<CardMedia
expandable={true}
overlay={<CardTitle title="Overlay title" subtitle="Overlay subtitle" />}
>
<img src="images/nature-600-337.jpg" alt="" />
</CardMedia>
<CardTitle title="Card title" subtitle="Card subtitle" expandable={true} />
<CardText expandable={true}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi.
Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque.
Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio.
</CardText>
<CardActions>
<FlatButton label="Expand" onClick={this.handleExpand} />
<FlatButton label="Reduce" onClick={this.handleReduce} />
</CardActions>
</Card>
);
}
}
//error:./src/Components/Home/post.jsx Module not found: Can't resolve
'material-ui/FlatButton' in
'/Users/apple/Documents/dev/source/sm-ui/servicemonster-ui/src/Components/Home'
home.jsx:
import React, {Component} from 'react';
import { connect } from 'react-redux';
import EditLocation from 'material-ui-icons/EditLocation';
import {Input, IconButton, } from 'material-ui';
import { Services, Search, } from './';
import {CardExampleControlled} from './post.jsx'
const Icon = require('../../assets/icon.svg');
class home extends Component {
render() {
// const { services, fetched, fetching, error } = this.props;
return (
<div className="home-page">
<div className="home">
<img className="logo" src={Icon} alt="Service Monster" />
<Search />
<div className="flex flex-row flex-center">
<IconButton className="" color="contrast" aria-label="Menu">
<EditLocation />
</IconButton>
<Input
defaultValue="india"
className="location"
inputProps={{
'aria-label': 'location',
}}
/>
</div>
</div>
<Services />
</div>
);
}
}
const mapStateToProps = (store) => {
return {
services: store.services.data,
fetched: store.services.fetched,
fetching: store.services.fetching,
error: store.services.error
}
}
const Home = connect(mapStateToProps)(home);
export { Home };
index.js:
import { Home, } from './Home.jsx';
import { Services, } from './Services.jsx';
import { Menus, } from './Menu.jsx';
import { Search } from './Search';
import { CardExampleControlled } from './post.jsx';
export { Home, Menus, Services, Search, CardExampleControlled };

Answer 1

There is version mismatch of material-ui.
From your code FlatButton component belongs to version v0.20 and probably you have installed v1.0.0-beta.xx which does not have that component.
so you need to install npm install material-ui for currently stable release. instead of npm install material-ui#next
I had the same problem when trying out material-ui.
It felt kind of tricky because it is not explicitly documented and there are differences between v0.20 and v1.0. There is no Button component in v0.20, for example look at http://www.material-ui.com/#/components/raised-button
But I have found solution on https://github.com/mui-org/material-ui/tree/master ( for version v0.20.0), titled Usage
you will need to wrap your 'App' (root react component) with tag <MuiThemeProvider>
I have created test app with react-create-app script, and changed file App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<RaisedButton label="Primary" primary={true} />
</div>
</MuiThemeProvider>
);
}
}
export default App;
voila, now it works :-)

Answer 2

If you've installed the non-alpha version of Material-UI you should be able to resolve this warning by changing your import line from:
import FlatButton from 'material-ui/FlatButton';
to
import { FlatButton } from 'material-ui';