Material-ui: Example in README throws can't resolve 'material-ui/Button'

[gordysc]

Problem description

Following the example on the README leads to:

Module not found: Can't resolve 'material-ui/Button'

Steps to reproduce

1. Execute:

create-react-app example
cd example
yarn add material-ui@latest
// Modify App.js to include a <Button/> tag
yarn start

Example App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Button from 'material-ui/Button';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Button>Example Button</Button>
      </div>
    );
  }
}

export default App;

Versions

• Material-UI: ^0.19.0
• React: ^15.6.1
• Browser: Chrome 60.0.3112.101 (Official Build) (64-bit)

[oliviertassinari]

You have mixed yarn add material-ui@latest@ and yarn add material-ui@next. Any idea how we could prevent such confusion? Otherwise, we can close.

[palaniichukdmytro]

We just use both versions material-ui and naterial-ui-next

[ErichBSchulz]

Hi @oliviertassinari

I am getting this error after

npm install material-ui --save
yarn 
yarn start

offending line is:

import Button from 'material-ui/Button';

[williammw]

i have same problem when i
import Button from 'material-ui/Button';
i tried both npm and yarn,
and i didnt found 'Button' module @ node_module/material-ui folder

[Socratic1]

i have same problem when i
import Button from 'material-ui/Button';
i tried both npm and yarn,
and i didnt found 'Button' module @ node_module/material-ui folder

I'm having exactly the same problem.

[vaibhavi3t]

I have same problem when I
import Button from 'material-ui/Button';
i tried with npm
and i didnt found 'Button' module @ node_module/material-ui folder

[cristobalchao]

Try npm install material-ui@next --save and restart the server, it should work!

[shubhamkes]

Still not working for me :(
"material-ui": "^1.0.0-beta.16",
Please help

[shubhamkes]

Got it sorted by removing entry from package.json and hit
npm install material-ui

[Oxyrus]

I had the same issue, uninstalled it with $ npm uninstall material-ui and re installed it $ npm i material-ui@next. The Button error is gone, now I'm missing the material-ui/Menu module.

[radjivF]

Same here

[arikaa]

I was able to solve this problem by running npm install material-ui@next --save and then restarting the server!

[radjivF]

@arikaa I have try this too, Its Ok I move on to Bulma,

Cheers

[udithaindika]

In latest material-ui use the below Button types instead of "material-ui/Button';"

import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import IconButton from 'material-ui/IconButton';

[borisyordanov]

@udithaindika You're right that they changed the types, but now i'm getting the Can't resolve 'material-ui/FloatingActionButton' error.

Changing the import doesn't always help - remember to restart your server, that solved it for me.

[Bobcui001]

I fixed this error by this way.
npm install material-ui@next --save
The App code is
import React, {Component} from 'react';
import Button from 'material-ui/Button'
class App extends Component {
render(){
return (
<Button> Welcome React</Button>
);
}
}
export default App;
May help you

[KIWI-JP]

I'm having similar issue and nothing I do through npm is fixing it.

If I use npm install material-ui --save then RaisedButton works. However, if I use npm install material-ui@next --save (beta.22) RaisedButton does not work (Button works) and I get a bunch of other issues too.

I'm importing RaisedButton like this: import RaisedButton from 'material-ui/RaisedButton';

Anyone knows why this is happening?

[borisyordanov]

@KIWI-JP perhaps material-ui will be removing the RaisedButton component some time in the future and they have already done that in beta.22?

Did you check if node_modules\material-ui\RaisedButton exists as a directory?

[djnsu]

Same problem. No RaisedButton in "node_modules\material-ui\RaisedButton".

[borisyordanov]

@djnsu Are you using the latest version of material-ui? The button should be there. I'm using 0.19.4 and i have it.

[djnsu]

"material-ui": "^1.0.0-beta.22" from package.json. It's latest pre-release I guess.

[mikecit22]

So it seems this is the new way to do it

import Button from 'material-ui/Button';

<Button raised>
 Please Update Docs :-)
</Button>

[mbrookes]

@mikecit22

Please Update Docs :-)

Which docs?

[mikecit22]

@mbrookes my apologies this was my mistake. I was referring to these docs, material-ui when I should have been referring to these material-ui-next

[storiesbyjerry]

Install material-ui using this command :

npm install material-ui@latest

[humbss]

it is working for me
npm install material-ui@next --save

my package.json has -> "material-ui": "^1.0.0-beta.33",

and in my component im using:
import Button from 'material-ui/Button';
<Button raised> working </Button>

[alin-sofianu]

I have the exact issue but with different components:
material-ui/CardActions
material-ui/CardContent
material-ui/CardMedia
material-ui/Tab

Reinstalling material-ui didn't help;

my package.json has -> "material-ui": "^1.0.0-beta.47"