Heroku not deploying build due to dependency issue - heroku

Question

while deploying build in heroku ,its causing an dependency error ,does anyone have faced the same ? What would be the root cause ? Any idea to resolve this ?
The heroku build used to work before but now this error happens and its confusing really
remote: -----> Installing dependencies
remote: Installing node modules
remote: npm ERR! code ERESOLVE
remote: npm ERR! ERESOLVE could not resolve
remote: npm ERR!
remote: npm ERR! While resolving: next#12.1.6
remote: npm ERR! Found: react#16.14.0
remote: npm ERR! node_modules/react
remote: npm ERR! react#"^16.10.1" from the root project
remote: npm ERR! peer react#"^16.8.0" from #apollo/react-common#3.1.4
remote: npm ERR! node_modules/#apollo/react-common
remote: npm ERR! #apollo/react-common#"^3.1.4" from #apollo/react-components#3.1.5
remote: npm ERR! node_modules/#apollo/react-components
remote: npm ERR! #apollo/react-components#"^3.1.5" from #apollo/react-hoc#3.1.5
remote: npm ERR! node_modules/#apollo/react-hoc
remote: npm ERR! #apollo/react-hoc#"^3.1.5" from react-apollo#3.1.5
remote: npm ERR! node_modules/react-apollo
remote: npm ERR! 1 more (react-apollo)
remote: npm ERR! #apollo/react-common#"^3.1.4" from #apollo/react-hoc#3.1.5
remote: npm ERR! node_modules/#apollo/react-hoc
remote: npm ERR! #apollo/react-hoc#"^3.1.5" from react-apollo#3.1.5
remote: npm ERR! node_modules/react-apollo
remote: npm ERR! react-apollo#"^3.1.3" from the root project
remote: npm ERR! 3 more (#apollo/react-hooks, #apollo/react-ssr, react-apollo)
remote: npm ERR! 14 more (#apollo/react-components, #apollo/react-hoc, ...)
remote: npm ERR!
remote: npm ERR! Could not resolve dependency:
remote: npm ERR! peer react#"^17.0.2 || ^18.0.0-0" from next#12.1.6
remote: npm ERR! node_modules/next
remote: npm ERR! next#"^12.1.6" from the root project
remote: npm ERR! peer next#">= 5.1.0" from next-env#1.1.1
remote: npm ERR! node_modules/next-env
remote: npm ERR! next-env#"^1.1.0" from the root project
remote: npm ERR!
remote: npm ERR! Conflicting peer dependency: react#18.1.0
remote: npm ERR! node_modules/react
remote: npm ERR! peer react#"^17.0.2 || ^18.0.0-0" from next#12.1.6
remote: npm ERR! node_modules/next
remote: npm ERR! next#"^12.1.6" from the root project
remote: npm ERR! peer next#">= 5.1.0" from next-env#1.1.1
remote: npm ERR! node_modules/next-env
remote: npm ERR! next-env#"^1.1.0" from the root project
remote: npm ERR!
remote: npm ERR! Fix the upstream dependency conflict, or retry
remote: npm ERR! this command with --force, or --legacy-peer-deps
remote: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote: npm ERR!
remote: npm ERR! See /tmp/npmcache.KnKS4/eresolve-report.txt for a full report.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR! /tmp/npmcache.KnKS4/_logs/2022-06-03T12_47_36_545Z-debug-0.log
remote:
remote: -----> Build failed

Answer 1

add NPM_CONFIG_LEGACY_PEER_DEPS environmental variable to your Heroku app and set its value to true.

Answer 2

I had the same issue a few days ago (early June) while deploying my React app on Heroku as well. It seems the problem was caused by the npm version update. By default, Heroku uses the latest stable version of node and npm as the building engines, but it might lead to conflicting dependencies if you use a previous version of them.
So, if it works completely fine locally but this issue happens while deploying it on Heroku, here is the solution:
Use node --version and npm --version to check out the versions on your local instance, and then add them under engines section in your package.json file, like this (replace 16.0.0 and 7.10.0 with the versions you have):
"engines": {
"node": "16.0.0",
"npm": "7.10.0"
},
then redeploy the app on Heroku. Problem should be fixed.