3

Please i'm getting this error from @mui/material library, I have checked the package.json of the mui/system and it has alpha exported in it.

./node_modules/@mui/material/styles/index.js
 Attempted import error: 'alpha' is not exported from '@mui/system'.

Here's the package.json of the application

"dependencies": {
    "@date-io/date-fns": "1.x",
    "@emotion/react": "11.7.0",
    "@emotion/styled": "11.6.0",
    "@material-ui/core": "4.12.3",
    "@material-ui/icons": "4.11.2",
    "@mui/icons-material": "5.2.0",
    "@mui/material": "^5.2.7",
    "@mui/styled-engine-sc": "5.1.0",
    "@mui/styles": "5.2.2",
    "@mui/system": "^5.2.6",
    "@reduxjs/toolkit": "1.6.2",
    "@testing-library/jest-dom": "5.11.4",
    "@testing-library/react": "11.1.0",
    "@testing-library/user-event": "12.1.10",
    "date-fns": "2.27.0",
    "express": "4.17.1",
    "react": "17.0.2",
    "react-bootstrap": "2.0.2",
    "react-bootstrap-icons": "1.6.1",
    "react-circular-gradient-progress": "1.1.1",
    "react-circular-progressbar": "2.0.4",
    "react-dom": "17.0.2",
    "react-icons": "4.3.1",
    "react-organizational-chart": "2.1.0",
    "react-redux": "7.2.6",
    "react-router-dom": "5.2.0",
    "react-scripts": "4.0.3",
    "react-spring": "9.3.1",
    "styled-components": "5.3.3",
    "web-vitals": "1.0.1"
  },

My node version is v12.22.8

olawalejuwonm
  • 1,315
  • 11
  • 17

1 Answers1

0

I think the problem is that you have mixed Material UI version 4 and 5 libraries and they are incompatible with each other. Try replacing @material-ui/core with @mui/core and just remove @material-ui/icons import as you already have @mui/icons-material and use the latest versions of all @mui/* imports.

Clear node_modules before installing dependencies again, to make sure everything is in order and old dependency versions are removed.

EDIT: what turned out to be necessary to solve it in the end - install node v12.22.7, remove node_modules, clean yarn cache and reinstall dependencies

Trevor
  • 121
  • 1
  • 1
  • 6
  • I tried this just now and it does not work.. though i'm not actually the version 4 packages. Do you have any other solution to this? – olawalejuwonm Jan 10 '22 at 16:40
  • I checked my MUI project with npm list @mui/system and it turns out that it is already imported by @mui/material. Try removing explicit @mui/system import and don't try to import alpha directly from that, instead use import { alpha } from '@mui/material/styles'; Let me know if that works out. Completely removing node_modules before npm install, to make sure conflicting imports are indeed removed, might also help. – Trevor Jan 11 '22 at 08:33
  • 1
    i have already solved the issue. I only installed node v 12.22.7, remove node_modules, clean yarn cache and i re-installed it and yes it solved the issue – olawalejuwonm Jan 11 '22 at 08:48
  • Great! I edited the answer to reflect removing node_modules. I'd appreciate it if you could accept the answer. – Trevor Jan 11 '22 at 09:31
  • Let the edit include everything i did, then i'll accept it – olawalejuwonm Jan 11 '22 at 13:53
  • Added it in bold for better visibility :) – Trevor Jan 12 '22 at 09:08