CODEWITHSUNDEEP
reactjsmaterial-ui
Dhiraj Gilda
Dhiraj Gilda

Reputation: 23

mui styles not compatible with react version 18

Here are my dependencies

"name": "get_it_done",
  "version": "1.0.0",
  "private": true,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/lab": "^5.0.0-alpha.134",
    "@mui/material": "^5.13.6",
    "@mui/styles": "^5.13.2",
    "@mui/system": "^5.13.6",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "chart.js": "^4.3.0",
    "chartjs": "^0.3.24",
    "humanize-duration": "^3.28.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.14.1",
    "react-scripts": "^5.0.1",
    "uuid": "^9.0.0",
    "web-vitals": "^3.3.2"
  },

The app is running perfectly on local system but when I try to host it on vercel or netlify I am having issue as follow :

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @mui/[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! react@"^18.2.0" from the root project npm ERR! peer react@">=16.8.0" from @emotion/[email protected] npm ERR! node_modules/@emotion/react npm ERR! @emotion/react@"^11.11.1" from the root project npm ERR! peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected] npm ERR!
node_modules/@emotion/styled npm ERR! @emotion/styled@"^11.11.0" from the root project npm ERR! 4 more (@mui/lab, @mui/material, @mui/styled-engine, @mui/system) npm ERR! 4 more (@mui/lab, @mui/material, @mui/styled-engine, @mui/system) npm ERR! 18 more (@emotion/styled, ...) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.0" from @mui/[email protected] npm ERR! node_modules/@mui/styles npm ERR! @mui/styles@"^5.13.2" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/react npm ERR! peer react@"^17.0.0" from @mui/[email protected] npm ERR!
node_modules/@mui/styles npm ERR! @mui/styles@"^5.13.2" 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: npm ERR! /vercel/.npm/_logs/2023-07-01T11_25_44_295Z-eresolve-report.txt npm ERR! A complete log of this run can be found in: npm ERR!
/vercel/.npm/_logs/2023-07-01T11_25_44_295Z-debug-0.log Error: Command "npm install" exited with 1 BUILD_UTILS_SPAWN_1: Command "npm install" exited with 1

I tried installing latest versions of mui as well and deleting and installing node modules again

Upvotes: 1

Views: 2303

Answers (1)

astro62
astro62

Reputation: 59

@mui/styles v5 is not compatible with React V18. If you wanna use @mui/styles, you have to downgrade your react version to v17 or lower.

Upvotes: 1

Related Questions