cannot deploy to heroku using google map api dependency - reactjs

Question

Heroku errors:
Total 13 (delta 9), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote: NPM_CONFIG_LOGLEVEL=error
remote: NODE_VERBOSE=false
remote: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): 16.x
remote: engines.npm (package.json): unspecified (use default)
remote: Resolving node version 16.x...
remote: Downloading and installing node 16.16.0...
remote: Using default npm version: 8.11.0
remote:
remote: -----> Installing dependencies
remote: Installing node modules
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR! While resolving: #reach/combobox#0.16.5
remote: npm ERR! Found: react#18.2.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^18.2.0" from the root project
remote: npm ERR! peer react#"^16.8 || ^17 || ^18" from #react-google-maps/api#2.12.0
remote: npm ERR! node_modules/#react-google-maps/api
remote: npm ERR! #react-google-maps/api#"^2.12.0" from the root project
remote: npm ERR! 9 more (#testing-library/react, react-avatar, react-dom, ...)
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^16.8.0 || 17.x" from #reach/combobox#0.16.5
remote: npm ERR! node_modules/#reach/combobox
remote: npm ERR! #reach/combobox#"^0.16.5" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#17.0.2
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^16.8.0 || 17.x" from #reach/combobox#0.16.5
remote: npm ERR! node_modules/#reach/combobox
remote: npm ERR! #reach/combobox#"^0.16.5" from the root project
I am trying to deploy this react mern-stack app to heroku for class, which uses certain google map api and dependencies. I tried --legacy-peer-deps and even --force (force completely broke my code), tried almost everything. Nothing seems to be working. Been trying at this for a while now and am completely blocked. I don't know what else to do. I appreciate any insight to this.
Heres my package.json
{
"name": "find-furry-friends",
"version": "0.1.0",
"engines": {
"node": "16.x"
},
"private": true,
"dependencies": {
"#hookform/resolvers": "^2.9.4",
"#reach/combobox": "^0.16.5",
"#react-google-maps/api": "^2.12.0",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"bcrypt": "^5.0.1",
"bootstrap": "^5.1.3",
"dotenv": "^16.0.1",
"express": "^4.18.1",
"jsonwebtoken": "^8.5.1",
"moment": "^2.29.4",
"mongoose": "^6.4.0",
"morgan": "^1.10.0",
"petfinder-client": "^1.0.2",
"react": "^18.2.0",
"react-avatar": "^5.0.1",
"react-dom": "^18.0.2",
"react-file-base64": "^1.0.3",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"react-tilty": "^2.0.3",
"serve-favicon": "^2.5.0",
"use-places-autocomplete": "^4.0.0",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:3001"
}

Answer 1

The problem is that #reach/combobox wants an older version of React (either 16 0r 17) but you have React 18.2.0 installed at the top level of your package.json. Try downgrading React to version 17:
npm install react#17
Then push to Heroku again.