npm ERR! could not resolve dependency - reactjs

Question

I have tried various solutions in order to simply update or install packages - remove node_modules plus the packages-lock, cache clean - but I always get something like the following:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #awesome-cordova-plugins/file#5.46.0
npm ERR! Found: #awesome-cordova-plugins/core#6.2.0
npm ERR! node_modules/#awesome-cordova-plugins/core
npm ERR! #awesome-cordova-plugins/core#"^6.2.0" from the root project
npm ERR! peer #awesome-cordova-plugins/core#"^6.0.1" from #awesome-cordova-plugins/file-opener#6.3.0
npm ERR! node_modules/#awesome-cordova-plugins/file-opener
npm ERR! #awesome-cordova-plugins/file-opener#"^6.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #awesome-cordova-plugins/core#"^5.1.0" from #awesome-cordova-plugins/file#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/file
npm ERR! #awesome-cordova-plugins/file#"^5.44.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: #awesome-cordova-plugins/core#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/core
npm ERR! peer #awesome-cordova-plugins/core#"^5.1.0" from #awesome-cordova-plugins/file#5.46.0
npm ERR! node_modules/#awesome-cordova-plugins/file
npm ERR! #awesome-cordova-plugins/file#"^5.44.0" 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.
My package.json file includes:
"dependencies": {
"#awesome-cordova-plugins/core": "^6.3.0",
"#awesome-cordova-plugins/file": "^6.3.0",
"#awesome-cordova-plugins/file-opener": "^6.3.0",
"#awesome-cordova-plugins/in-app-purchase-2": "^6.3.0",
"#capacitor-community/file-opener": "^1.0.4",
"#capacitor/android": "^4.6.3",
"#capacitor/core": "^4.6.3",
"#capacitor/ios": "^4.6.3",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#fortawesome/fontawesome-pro": "^6.3.0",
"#fortawesome/fontawesome-svg-core": "^6.3.0",
"#fortawesome/free-solid-svg-icons": "^6.3.0",
"#fortawesome/pro-solid-svg-icons": "^6.3.0",
"#fortawesome/react-fontawesome": "^0.2.0",
"#fortawesome/sharp-solid-svg-icons": "^6.3.0",
"#ionic-native/core": "^5.36.0",
"#ionic-native/in-app-purchase-2": "^5.36.0",
"#ionic-native/purchases": "^5.36.0",
"#ionic/react": "^6.5.2",
"#material-ui/core": "^4.12.3",
"#material-ui/data-grid": "^4.0.0-alpha.37",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.60",
"#material-ui/pickers": "^3.3.10",
"#mui/icons-material": "^5.11.0",
"#mui/lab": "^5.0.0-alpha.119",
"#mui/material": "^5.11.8",
"#mui/x-date-pickers": "^5.0.17",
"#stripe/firestore-stripe-payments": "^0.0.6",
"#stripe/react-stripe-js": "^1.16.4",
"#stripe/stripe-js": "^1.46.0",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"axios": "^1.3.2",
"cordova-annotated-plugin-android": "^1.0.4",
"cordova-plugin-file": "^7.0.0",
"cordova-plugin-file-opener2": "^4.0.0",
"cordova-plugin-purchase": "^13.3.0",
"date-fns": "^2.29.3",
"dotenv": "^16.0.3",
"file-saver": "^2.0.5",
"firebase": "^9.17.1",
"firebase-admin": "^11.5.0",
"firebase-functions": "^4.2.1",
"firestore-export-import": "^1.3.5",
"html-to-image": "^1.11.11",
"html2canvas": "^1.4.1",
"js-file-download": "^0.4.12",
"jspdf": "^2.5.1",
"jspdf-autotable": "^3.5.28",
"material-table": "^2.0.3",
"material-ui-search-bar": "^1.0.0",
"npm-check-updates": "^16.6.5",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-bulleted-textarea": "^1.1.2",
"react-confirm-box": "^1.2.0",
"react-csv": "^2.2.2",
"react-dnd": "^16.0.1",
"react-dom": "^18.2.0",
"react-html2pdf": "^1.0.1",
"react-linkify": "^1.0.0-alpha",
"react-number-format": "^5.1.3",
"react-router-dom": "^6.8.1",
"react-scripts": "5.0.1",
"react-select": "^5.7.0",
"react-select-material-ui": "^9.2.0",
"react-slick": "^0.29.0",
"react-swipeable-views": "^0.14.0",
"react-table": "^7.8.0",
"react-tabs": "^6.0.0",
"slick-carousel": "^1.8.1",
"stripe": "^11.9.1",
"styled-components": "^5.3.6",
"web-vitals": "^3.1.1"
}
If I run npm config set legacy-peer-deps true then it wont compile because a range of other issues pop up.
I don't really understand what the problem is as I haven't had an issue before up to this point - but I am really wanting to keep the packages up to date.
Can someone assist or point me in the right direction?

Answer 1

You can ignore installing peer dependencies by using:
npm install --legacy-peer-deps

Answer 2

Conflicts are checked between each module listed in package.json.
It seems that the problem occurred while upgrading the version of react from 17 to 18.
It might be a good idea to go back before the initial upgrade position and check the guidelines for each module.
This is a one of sample, I think the following guide might be helpful.
Migrating to v5: getting started
Maybe the version related to cordova is corrupted by npm command.
It is not recommended unless you are expecting the exact version to be defined after this command works. But sometimes it helps.
This will help you : npm: When to use --force and --legacy-peer-deps
Be sure to back up package-lock.json before deleting it.
There are many problems that cannot be solved by deleting this file.
Some developers explain that this file is a file that keeps the history of all modules installed by the npm install command.
It would be nice to revisit the documentation from this point of view.
package-lock.json : A manifestation of the manifest