找不到模块：无法解析“@material-ui/icons/ContentCut”

Question

On one of my React project, I'm using Material-UI icons with those info in my package.json

"@material-ui/core": "^4.9.10",
"@material-ui/icons": "^4.5.1",

All icons are working fine until I added the icon ContentCut which is availabe at this link :

this is how I'm importing it:

import ContentCutIcon from '@material-ui/icons/ContentCut';

but I get the error:

Module not found: Can't resolve '@material-ui/icons/ContentCut'

I tried by upgrading the icons package using yarn:

yarn upgrade @material-ui/core --latest
yarn upgrade @material-ui/icons --latest

but it does not solve the problem.

I created this codesandbox with the fixed latest version of @material-ui/icons which is today v1.4.9 as described on the npm project page to illustrate the problem (comment the ContentCut import line to see the error).

Does anyone solved this specific issue (when the icon is available but the import is not possible even after an npm/yarn upgrade)?

Answer 1

Install the material core library:

npm install @material-ui/core

Answer 2

You can use the search here to see which icons are part of @material-ui/icons : https://material-ui.com/components/material-icons/ . ContentCut is not there.

If you have the svg for an icon such as from the material.io site, you can create an SvgIcon element by grabbing the path element from the svg:

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);

Here is a working version of your sandbox leveraging this:

import React from "react";
import MailIcon from "@material-ui/icons/Mail";
import ForwardIcon from "@material-ui/icons/Forward";
import createSvgIcon from "@material-ui/icons/utils/createSvgIcon";

const ContentCutIcon = createSvgIcon(
  <path d="M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z" />,
  "ContentCut"
);
export default function App() {
  return (
    <div className="App">
      <h1>This is three working icons</h1>
      <ul>
        <li>
          <MailIcon />
        </li>
        <li>
          <ForwardIcon />
        </li>
        <li>
          <ContentCutIcon />
        </li>
      </ul>
    </div>
  );
}

Answer 3

npm install @mui/icons-material is the cure for this problems

Answer 4

It means the ContentCut is not available in the node_modules.

One way to solve this is to create files manually and save to icons folder inside node_modules. I already create file for your ContentCut SVG code.

ContentCut.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _createSvgIcon = _interopRequireDefault(require("./utils/createSvgIcon"));

var _default = (0, _createSvgIcon.default)(_react.default.createElement("path", {
  d: "M9.64 7.64c.23-.5.36-1.05.36-1.64 0-2.21-1.79-4-4-4S2 3.79 2 6s1.79 4 4 4c.59 0 1.14-.13 1.64-.36L10 12l-2.36 2.36C7.14 14.13 6.59 14 6 14c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4c0-.59-.13-1.14-.36-1.64L12 14l7 7h3v-1L9.64 7.64zM6 8c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm0 12c-1.1 0-2-.89-2-2s.9-2 2-2 2 .89 2 2-.9 2-2 2zm6-7.5c-.28 0-.5-.22-.5-.5s.22-.5.5-.5.5.22.5.5-.22.5-.5.5zM19 3l-6 6 2 2 7-7V3z"
}), 'ContentCut');

exports.default = _default;

ContentCut.d.ts

export { default } from '@material-ui/core/SvgIcon';

add to this path \node_modules@material-ui\icons

then this import to your component

import ContentCutIcon from '@material-ui/icons/ContentCut';

<ContentCutIcon />

Answer 5

i had the same issue in react functionnal component, seems link to instance. I have this working but if audio is inside SongButton, it doesn't work anymore

const audio = new Audio("../song.mp3")
const SongButton = () =>{

const [isAudio, setIsAudio] = React.useState(false)

const onClick = () => {
    if(isAudio){
        audio.pause();
        //audio.currentTime = 0;
    }else{
        audio.play();
    }
    setIsAudio(!isAudio);
  }

  if(isAudio){
      return (
          <div className="SongButtonDiv">
               <PauseCircleOutlineIcon onClick={onClick} fontSize="large" />
          </div>
      )
  }else{
      return (
          <div className="SongButtonDiv">
               <PlayCircleOutlineIcon onClick={onClick} fontSize="large"/>
          </div>
       )
   }
}
export default SongButton

Answer 6

Solution that works for me:

    npm i @material-ui/icons

Answer 7

If you are developing with react run this in the terminal
yarn add @material-ui/core @material-ui/icons