2

Module not found: Error: Can't resolve '@mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'

Failed to compile.

Module not found: Error: Can't resolve '@mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components' ERROR in ./src/components/Header.js 9:0-52 Module not found: Error: Can't resolve '@mui/icons-material/Search' in 'C:\Users\pande\Documents\slack-clone\src\components'

webpack compiled with 1 error

import styled from "styled-components";
import { Avatar } from '@mui/material';
import SearchIcon from "@mui/icons-material/Search";
import AccessTimeIcon from "@mui/icons-material/AccessTime";
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../Firebase";

    const Header = () => {
    const [user] = useAuthState(auth);

    return (
        <HeaderContainer>
            {/* header left */}
        <HeaderLeft>
            <HeaderAvatar
            onClick={() => auth.signOut()}
            alt={user?.displayName}
            src={user?.photoURL}
            />
            <AccessTimeIcon />
        </HeaderLeft>
        <HeaderSearch>
            <SearchIcon />
            <input type = "text" placeholder="Search" />
        </HeaderSearch>
        <HeaderRight>
            <HelpOutlineIcon />
        </HeaderRight>
        </HeaderContainer>
    );
    };

    export default Header;

package.json file

{
  "name": "slack-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.9.3",
    "@reduxjs/toolkit": "^1.8.3",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^14.3.0",
    "firebase": "^9.9.1",
    "firebase-hooks": "^0.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-firebase-hooks": "^5.0.3",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-spinkit": "^3.0.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-components": "^5"
  },
  "devDependencies": {
    "@types/react-spinkit": "^3.0.7",
    "@types/styled-components": "^5.1.25"
  }
}
Priyanshu Pandey
  • 43
  • 7
  • Have you added `@material-ui/icons` package. Icons are not part of `@material-ui/core`. Try installing icons package if not added. – mc-user Aug 03 '22 at 11:05
  • npm install @mui/material @emotion/react @emotion/styled firstly installed this from https://mui.com/ and for icons npm install @mui/icons-material installed from https://mui.com/material-ui/icons/#main-content but still it is showing the same error. – Priyanshu Pandey Aug 03 '22 at 14:29
  • Can you update the question with your `package.json`? – mc-user Aug 03 '22 at 14:38

1 Answers1

0

I have added the below packages, and the icons are working fine.

"@emotion/react": "11.10.0",
"@emotion/styled": "11.10.0",
"@mui/icons-material": "5.8.4",
"@mui/material": "5.9.3",

@emotion/styled and @emotion/react are the dependency packages for icons. Attaching the sandbox for reference.

Edit nice-hill-dq76gc

mc-user
  • 1,769
  • 4
  • 14
  • 25