Dependency issues upgrading to MUI version 5

Question

I'm trying to upgrade MUI v4 to MUI v5, and I've read the docs in migrating to v5 here.

I get this error message when running npm update

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: placemaker@0.1.0
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from @mui/styles@5.11.7
npm ERR! node_modules/@mui/styles
npm ERR!   @mui/styles@"^5.10.16" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR!
npm ERR! For a full report see:

Log files:

C:\Users\...\...\...\file.log

# npm resolution error report

While resolving: app@0.1.0
Found: react@18.2.0
node_modules/react
  react@"^18.2.0" from the root project

Could not resolve dependency:
peer react@"^17.0.0" from @mui/styles@5.11.7
node_modules/@mui/styles
  @mui/styles@"^5.10.16" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

my package.json dependencies

"dependencies": {
    "@auth0/auth0-react": "^1.12.0",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.16",
    "@mui/styles": "^5.10.16",
    "@mui/x-data-grid": "^5.17.13",
    "@mui/x-date-pickers": "^5.0.9",
    "@reduxjs/toolkit": "^1.9.1",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/multer": "^1.4.7",
    "@types/node": "^16.18.3",
    "@types/pg": "^8.6.5",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "@types/react-redux": "^7.1.24",
    "auth0": "^3.1.1",
    "autosuggest-highlight": "^3.3.4",
    "axios": "^0.27.2",
    "cors": "^2.8.5",
    "dayjs": "^1.11.6",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "express-oauth2-jwt-bearer": "^1.2.0",
    "express-promise-router": "^4.1.1",
    "helmet": "^6.0.1",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.20",
    "pg": "^8.8.0",
    "pg-format": "^1.0.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.40.0",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-select": "^5.6.1",
    "socket.io": "^4.5.4",
    "socket.io-client": "^4.5.4",
    "typescript": "^4.9.3",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4"
  },
  "devDependencies": {
    "@types/autosuggest-highlight": "^3.2.0",
    "@types/cors": "^2.8.12",
    "@types/dotenv": "^8.2.0",
    "@types/google.maps": "^3.50.5",
    "@types/helmet": "^4.0.0",
    "@types/uuid": "^8.3.4",
    "concurrently": "^7.6.0",
    "react-scripts": "5.0.1"
  },

Not sure how to fix this, it appears the log tells me that react@^17.0.0 should work and I'm running version 18.

npm auidt --production provides the following info:

# npm audit report

json5  2.0.0 - 2.2.1
Severity: high
Prototype Pollution in JSON5 via Parse Method - https://github.com/advisories/GHSA-9c47-m6qq-7p4h
fix available via `npm audit fix`
node_modules/json5

1 high severity vulnerability

@sancelot how does that help? It's an incompatibility not a vulnerability. — jonrsharpe, Feb 13 '23 at 20:02
this is also new, I was trying to add React-quill RTF package when I noticed the JSON5 vulnerability. @jonrsharpe, I'll give a read at the semver.npmjs.com thanks for that gem. — RJA, Feb 13 '23 at 20:04
maybe read this :) https://stackoverflow.com/questions/22343224/whats-the-difference-between-tilde-and-caret-in-package-json — Mr.P, Feb 13 '23 at 20:05
thanks Mr. P, so I can only use version >=17.0.0 && version <= 18.0.0? — RJA, Feb 13 '23 at 20:08
MUI docs say the following: Additionally, v5 is the only version that fully supports React 18, so you will need to migrate to take advantage of the latest React features. Yet... my package.json appears to have v5 already, and when I try to update to the newest MUI packages, it says ^17.0 (so range of 17.0.0 to <18.0.0) Previous comment was incorrect... I'm a little befuddled by this error message..... — RJA, Feb 13 '23 at 20:35

score 1 · Accepted Answer · answered Feb 14 '23 at 07:23

1

Try to update your dependencies using npm-check-updates https://www.npmjs.com/package/npm-check-updates

answered Feb 14 '23 at 07:23

sancelot

1,905
12
31

thanks sancelot, I actually resolved this issue after reading your comment. (was going to try your suggestion if I didn't get it a second time around. – RJA Feb 14 '23 at 11:38

score 1 · Answer 2 · answered Feb 14 '23 at 11:41

Turns out, I was not thorough in reading the MUI docs, I had to:

npm uninstall @mui/style
npm i @mui/system

replace old code that was dependent on @mui/style

This removed the version mismatch.

I tried different ways i.e npm update --force / npm audit fix --force which just made it worse by downgrading to different packages creating many more vulnerabilities.

Thanks all for the help! Will accept sancelots answer though I did not try it, it seems like a beginner friendly solution

Dependency issues upgrading to MUI version 5

2 Answers2