CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
pKay
pKay

Reputation: 1840

Can't resolve 'material-ui/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>

Upvotes: 10

Views: 42687

Answers (5)

Masud Rana
Masud Rana

Reputation: 11

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

Upvotes: 1

karthik.engineering
karthik.engineering

Reputation: 31

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';

Upvotes: 1

Yrineu Rodrigues
Yrineu Rodrigues

Reputation: 1492

For others who face the same issue in a future:

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

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

Upvotes: 21

dauffret
dauffret

Reputation: 1417

@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)

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281696

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

Upvotes: 8

Related Questions