Error while deploying the react app on heroku - reactjs

Question

While deploying the react app in Heroku I am getting below error. I have deleted package-lock.json and did an npm install again, but again I am getting the same error. Could someone please advise on how can I resolve the error ?
Following are the dependencies installed :
"dependencies": {
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#material-ui/core": "^4.12.4",
"#mui/icons-material": "^5.8.3",
"#mui/material": "^5.8.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"axios": "^0.27.2",
"cors": "^2.8.5",
"express": "^4.18.1",
"multer": "^1.4.4",
"mysql2": "^2.3.3",
"path": "^0.12.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-hook-form": "^7.31.2",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-tweet-embed": "^2.0.0",
"sequelize": "^6.20.1",
"web-vitals": "^2.1.4"
},
Logs from Heroku app:
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.15.1...
Using default npm version: 8.11.0
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: #material-ui/core#4.12.4
npm ERR! Found: react#18.1.0
npm ERR! node_modules/react
npm ERR! react#"^18.0.0" from the root project
npm ERR! peer react#">= 16" from react-scripts#5.0.1
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"^5.0.1" from the root project
npm ERR! 16 more (#mui/utils, react-router-dom, #emotion/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.12.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.12.4" 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! See /tmp/npmcache.MrETS/eresolve-report.txt for a full report.

Answer 1

try to add npm --legacy-peer-deps in the heroku

Answer 2

adding "preinstall": "npx npm-force-resolutions", and "heroku-postbuild": "npm install" to the package.json file as follow, helped me through this problem
"scripts": { "start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"preinstall": "npx npm-force-resolutions",
"heroku-postbuild": "npm install" }