I have a CRA project and while running npm i I get the following error:
npm ERR! While resolving: [email protected]
npm ERR! Found: react@undefined
npm ERR! node_modules/react
npm ERR! react@"^18.2.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/material
npm ERR! @mui/material@"^5.10.8" from the root project
I understand this is an incompatibility between react and mui, but I see that MUI requires react >= 17 as a peer dependency, so I should be OK.
Here are my deps and devDeps from my package.json file:
"dependencies": {
"@azure/communication-calling": "^1.6.3",
"@azure/communication-common": "^2.1.0",
"@date-io/date-fns": "^2.16.0",
"@mui/material": "^5.10.8",
"@mui/lab": "^1.0.0",
"@mui/icons-material": "^5.10.6",
"@mui/styles": "^5.10.8",
"@mui/x-date-pickers": "^5.0.3",
"@reduxjs/toolkit": "^1.8.5",
"@sentry/react": "^7.14.1",
"@sentry/tracing": "^7.14.1",
"date-fns": "^2.29.3",
"date-fns-tz": "^1.3.7",
"downloadjs": "^1.4.7",
"file-saver": "^2.0.5",
"final-form": "^4.20.7",
"formik": "^2.2.9",
"fuse.js": "^6.6.2",
"i18next": "^21.9.2",
"i18next-browser-languagedetector": "^6.1.5",
"i18next-xhr-backend": "^3.2.2",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.21",
"react": "^18.2.3",
"react-app-rewired": "^2.2.1",
"react-dates": "^21.8.0",
"react-dom": "^18.2.0",
"react-draggable": "^4.4.5",
"react-final-form": "^6.5.9",
"react-i18next": "^11.18.6",
"react-image-lightbox": "^5.1.4",
"react-joyride": "^2.5.3",
"react-pdf": "^5.7.2",
"react-query": "^3.39.2",
"react-redux": "^8.0.4",
"react-resizable": "^3.0.4",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.4.1",
"react-scripts": "^5.0.1",
"react-signature-canvas": "^1.0.6",
"react-table": "^7.8.0",
"socket.io-client": "^4.5.2",
"styled-components": "^5.3.6",
"ua-parser-js": "^1.0.2",
"validate.js": "^0.13.1",
"yup": "^0.32.11"
},
"devDependencies": {
"@commitlint/cli": "^17.1.2",
"@commitlint/config-conventional": "^17.1.0",
"@release-it/conventional-changelog": "^5.1.0",
"@storybook/addon-actions": "^6.5.12",
"@storybook/addon-links": "^6.5.12",
"@storybook/addons": "^6.5.12",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.12",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^14.4.3",
"@types/downloadjs": "^1.4.3",
"@types/file-saver": "^2.0.5",
"@types/jest": "^29.1.1",
"@types/jsonwebtoken": "^8.5.9",
"@types/lodash": "^4.14.186",
"@types/node": "^18.8.2",
"@types/react": "^18.0.21",
"@types/react-dates": "^21.8.3",
"@types/react-dom": "^18.0.6",
"@types/react-helmet": "^6.1.5",
"@types/react-pdf": "^5.7.2",
"@types/react-redux": "^7.1.24",
"@types/react-resizable": "^3.0.3",
"@types/react-router-dom": "^5.3.3",
"@types/react-signature-canvas": "^1.0.2",
"@types/react-table": "^7.7.12",
"@types/socket.io-client": "^1.4.36",
"@types/styled-components": "^5.1.26",
"@types/ua-parser-js": "^0.7.36",
"@types/yup": "^0.29.14",
"husky": "^8.0.1",
"jest-environment-jsdom-sixteen": "^1.0.3",
"prettier": "^2.7.1",
"pretty-quick": "^3.1.3",
"redux-mock-store": "^1.5.4",
"release-it": "^15.5.0",
"typescript": "^4.8.4"
},
How can I determine what are the failing deps and how can I fix those?
Note that I just upgraded all of my deps with ncu -u command. I also tried to upgrade lib by lib gradually, but at a certain point I step into the same issue and I don't know how I can get rid of it.
CodePudding user response：
Things you can do:
- remove package-lock.json and retry
npm i - run
npm iwith the flag--legacy-peer-deps
If you are using npm >= v7, try to use npm i --legacy-peer-deps because, after npm v6, it tries to install peer deps automatically, but some libraries don't define peer deps versions correctly, so it fails.
If that is the case, use npm v6 or npm v7 with the flag mentioned above.