I have an existing react project to which i want to add material-ui library . So i have used the command npm install --save material-ui. But when i run it ,it shows error .

Here is the error details -

Can't resolve 'material-ui/Button' in 'C:\Users{user}\demo2\src'

Here is the link for repository

<Button variant="raised" color="primary">
  Hello World
</Button>

I have an existing react project to which i want to add material-ui library . So i have used the command npm install --save material-ui. But when i run it ,it shows error .

Here is the error details -

Can't resolve 'material-ui/Button' in 'C:\Users{user}\demo2\src'

Here is the link for repository

https://github.com/mui-org/material-ui

<Button variant="raised" color="primary">
  Hello World
</Button>

• javascript
• reactjs
• material-ui

• see github.com/mui-org/material-ui/issues/7870 – gkubed Commented Feb 14, 2018 at 14:09

5 Answers 5

For others who face the same issue in a future:

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

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

The Button component that you are trying to use from material-ui is imported as Button from v1 onwards which is still in beta stage. To use it you need to install it like

npm install --save material-ui@next

and then you can import Button from material-ui as

import Button from 'material-ui/Button';

Check its usage as mentioned in readme of the git repository

In the current stable version, you have option of using FlatButton, RaisedButton, FloatingActionButton and IconButton

@Shubham Khatri's answer should be the accepted answer IMHO.

However, in order to use the Material UI library you installed, you should use it as in the example found in the MUI documentation:

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const style = {
  margin: 12,
};

const RaisedButtonExampleSimple = () => (
  <div>
    <RaisedButton label="Default" style={style} />
    <RaisedButton label="Primary" primary={true} style={style} />
    <RaisedButton label="Secondary" secondary={true} style={style} />
    <RaisedButton label="Disabled" disabled={true} style={style} />
    <br />
    <br />
    <RaisedButton label="Full width" fullWidth={true} />
  </div>
);

export default RaisedButtonExampleSimple;

Keep in mind that v1.x versions of MUI are not backward compatible with v0.x versions. MUI strongly recommends using v1.x in new projects even though it's in beta, as the amount of work needed to upgrade from v0.x to v1.x is so much more than v1.x to v1.y (been there, done that, and I agree)

The following code will solve the issue.

Install the npm packages:

npm install @mui/material @emotion/react @emotion/styled

Import using :

import Button from '@mui/material/Button';

Module not found: Error: Can't resolve '@mui/material/Button' Easly Fixed it.

import it:

import Button from '@mui/material/Button';

Installing npm packages involves:

npm:

npm install @mui/material @emotion/react @emotion/styled

yarn:

yarn add @mui/material @emotion/react @emotion/styled