Material UI/React errors

Question

I installed Material UI and I tried importing it into my React project. It showed " Module not found: Can't resolve 'material-ui/core/Button "

How do I import it from node_modules ??

import React, { Component } from 'react';
import MuiThemeProvider from '@material-ui/styles/MuiThemeProvider';
import Button from '@material-ui/core/Button';

import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
      <div className="App">
      <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
          </div>
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <Button variant ="contained" label = "Material UI" />
      </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

import { Button } from "@material-ui/core";

Try this.

Answer 2

Install material ui with npm or yarn. This should be done from your project's main directory.

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Then, you can use import Button from '@material-ui/core/Button'; at the top of your file.

Answer 3

Since this post is quite recent, I am pretty sure you followed the steps in material-ui getting started.

What you should do is check the version of material-ui core installed in your project. Within your package.json file, check your material-ui core version, it should look like this,

"dependencies": {
    "@babel/core": "^7.1.5",
    "@babel/runtime": "^7.1.5",
    "@date-io/moment": "0.0.2",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.1",
    "@material-ui/lab": "^3.0.0-alpha.23",
  }

or you can just do

npm list

to check all dependencies you have within your project.

Find out the lastest and stable version they have on npm material-ui/core