Module not found: Error: Cannot resolve module in React Material-UI

Question

Im using React Material-UI design my interface... There is an error coming when I using this particular component in my main layout.. Anyone can help me to find out the solution enter code here

  [287] ./src/components/RadioCustom.js 5.42 kB {0} [built] [2 errors]
     + 292 hidden modules

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonUnchecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 27:28-78

ERROR in ./src/components/RadioCustom.js
Module not found: Error: Cannot resolve module '@material-ui/icons/RadioButtonChecked' in c:\Users\Muhammed Suhail\Desktop\redux\ReduxSimpleStarter-master\src\components
 @ ./src/components/RadioCustom.js 31:26-74

This is my RadioCustom.js this code I took from the Material-UI website.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import Radio from '@material-ui/core/Radio';
import RadioButtonUncheckedIcon from '@material-ui/icons/RadioButtonUnchecked';
import RadioButtonCheckedIcon from '@material-ui/icons/RadioButtonChecked';

const styles = {
  root: {
    color: green[600],
    '&$checked': {
      color: green[500],
    },
  },
  checked: {},
  size: {
    width: 40,
    height: 40,
  },
  sizeIcon: {
    fontSize: 20,
  },
};

class RadioButtons extends React.Component {
  state = {
    selectedValue: 'a',
  };

  handleChange = event => {
    this.setState({ selectedValue: event.target.value });
  };

  render() {
    const { classes } = this.props;

    return (
      <div>
        <Radio
          checked={this.state.selectedValue === 'a'}
          onChange={this.handleChange}
          value="a"
          name="radio-button-demo"
          aria-label="A"
        />
        <Radio
          checked={this.state.selectedValue === 'b'}
          onChange={this.handleChange}
          value="b"
          name="radio-button-demo"
          aria-label="B"
        />
        <Radio
          checked={this.state.selectedValue === 'c'}
          onChange={this.handleChange}
          value="c"
          name="radio-button-demo"
          aria-label="C"
          classes={{
            root: classes.root,
            checked: classes.checked,
          }}
        />
        <Radio
          checked={this.state.selectedValue === 'd'}
          onChange={this.handleChange}
          value="d"
          color="default"
          name="radio-button-demo"
          aria-label="D"
        />
        <Radio
          checked={this.state.selectedValue === 'e'}
          onChange={this.handleChange}
          value="e"
          color="default"
          name="radio-button-demo"
          aria-label="E"
          className={classes.size}
          icon={<RadioButtonUncheckedIcon className={classes.sizeIcon} />}
          checkedIcon={<RadioButtonCheckedIcon className={classes.sizeIcon} />}
        />
      </div>
    );
  }
}

RadioButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RadioButtons);

Anyone please help to findout the solution.. because I'm new to react..

Answer 1

you probably forgot to install the dependency : npm install @material-ui/icons --save should solve the problem

https://material-ui.com/getting-started/installation/#svg-icons