0

I've tried all suggestion here but did not work. Issue with Material UI Icons npm installation : unable to resolve dependency tree nor this one below: create-react-app dependency version issues with React 18 What can be done to solve this issue, please? below is my package.lock.json.

     "name": "cashflowbr",
  "version": "0.1.0",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "cashflowbr",
      "version": "0.1.0",
      "dependencies": {
        "@emotion/react": "^11.9.0",
        "@emotion/styled": "^11.8.1",
        "@fontsource/roboto": "^4.5.5",
        "@mui/icons-material": "^5.6.2",
        "@mui/material": "^5.6.2",
        "@testing-library/jest-dom": "^5.16.4",
        "@testing-library/react": "^13.1.1",
        "@testing-library/user-event": "^13.5.0",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
      }
Flavio Rocha 2018
  • 37
  • 3
  • 13
  • Can you please attach the error(s) that you get? – ckesplin Apr 23 '22 at 00:47
  • Compiled with problems:X ERROR in ./src/components/NavBar.js 5:0-50 Module not found: Error: Can't resolve '@material-ui/core/AppBar' in '/home/flavio/CashFlowBr/cashflowbr/src/components' ERROR in ./src/components/NavBar.js 6:0-48 Module not found: Error: Can't resolve '@material-ui/core/ToolBar' in '/home/flavio/CashFlowBr/cashflowbr/src/components' ERROR in ./src/components/NavBar.js 7:0-53 Module not found: Error: Can't resolve '@material-ui/core/Typography' in '/home/flavio/CashFlowBr/cashflowbr/src/components' – Flavio Rocha 2018 Apr 23 '22 at 18:52
  • My NavBar.js file: import React from 'react'; import {AppBar} from '@material-ui/core/AppBar'; import ToolBar from '@material-ui/core/ToolBar'; import Typografy from '@material-ui/core/Typography'; const NavBar = () => { return(
    CashFlowBR - Sistema de Gerenciamento Financeiro
    – Flavio Rocha 2018 Apr 23 '22 at 18:54

1 Answers1

2

I appears that you are attempting to import MUI version 4 components while installing MUI version 5.

Your imports should be from @mui/material (version 5) and not from @material-ui/core (version 4).

Option 1

Change your imports to use the installed library (@mui/material), ex:

import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@mui/icons-material/Menu';

Option 2

Change your package.json to install MUIv4.

Remove:

"@emotion/react": "^11.9.0",
"@emotion/styled": "^11.8.1",
...
"@mui/icons-material": "^5.6.2",
"@mui/material": "^5.6.2",

... and add:

"@material-ui/core": "4.11.3",
"@material-ui/icons": "4.11.3",

Finally, run npm install. Delete your node_modules folder and then npm install if you have any issues after that.

ckesplin
  • 1,284
  • 1
  • 9
  • 15