Error running `npm i`: Found: react@undefined

Question

I have a CRA project and while running npm i I get the following error:

npm ERR! While resolving: telo-ui@8.0.0
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/material@5.10.8
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.

Try to remove package-lock.json and node_modules and rerun npm i. You can also try to run npm cache clean --force — MrBens, Oct 05 '22 at 10:07
I forgot to mention that I tried those steps also. Still the issue persists — Gabriele Buffolino, Oct 05 '22 at 10:10

score 1 · Accepted Answer · answered Oct 05 '22 at 10:11

1

Things you can do:

remove package-lock.json and retry npm i
run npm i with 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.

answered Oct 05 '22 at 10:11

Haseeb Anwar

2,438
19
22

Thanks for the suggestion, I wasn't aware of that flag. I am running npm 8.19.2 and tried to run `npm i --legacy--peer-deps` as you suggested, but then I get another error: `No matching version found for @mui/lab@^1.0.0. In most cases you or one of your dependencies are requesting a package version that doesn't exist.` – Gabriele Buffolino Oct 05 '22 at 10:34
Oh, of course, it is self explanatory. I need to use the proper version of `@mui/lab`. I don't think I need it, so I am going to drop it – Gabriele Buffolino Oct 05 '22 at 10:56
1

The `--legacy-peer-deps` did the trick. Also, I needed to amend a few uncorrect versions, but the error messages from `npm i --legacy-peer-deps` helped me understand which were wrong. Also, please check this other question that contains some useful information: https://stackoverflow.com/questions/66239691/what-does-npm-install-legacy-peer-deps-do-exactly-when-is-it-recommended-wh – Gabriele Buffolino Oct 05 '22 at 12:20

Error running `npm i`: Found: react@undefined

1 Answers1