Heroku Push rejected, Node.js & React App - node.js

Question

Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Heroku Push logs:
> NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: react-paypal-button-v2#2.6.3
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
npm ERR! peer react#">=16.3.2" from #restart/context#2.1.4
npm ERR! node_modules/#restart/context
npm ERR! #restart/context#"^2.1.4" from react-bootstrap#1.6.6
npm ERR! node_modules/react-bootstrap
npm ERR! react-bootstrap#"^1.6.6" from the root project
npm ERR! 16 more (#restart/hooks, #testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
npm ERR! react-paypal-button-v2#"^2.6.3" 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.1sG84/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.1sG84/_logs/2022-12-15T17_08_01_767Z-debug-0.log
-----> Build failed
package.json React:
{
"name": "frontend",
"proxy": "http://127.0.0.1:5000",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^1.2.1",
"install": "^0.13.0",
"react": "^18.2.0",
"react-bootstrap": "^1.6.6",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-paypal-button-v2": "^2.6.3",
"react-redux": "^8.0.5",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.3.4",
"react-scripts": "^5.0.1",
"redux": "^4.2.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"install-peers": "^1.0.4"
}
}
package.json Node.js:
{
"name": "backend",
"version": "1.0.0",
"description": "",
"main": "server.js",
"type": "module",
"engines": {
"node": "17.x"
},
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"
},
"author": "",
"license": "MIT",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"dotenv": "^8.6.0",
"express": "^4.18.2",
"express-async-handler": "^1.2.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.13.15",
"morgan": "^1.10.0",
"multer": "^1.4.4"
},
"devDependencies": {
"concurrently": "^5.3.0",
"nodemon": "^2.0.20"
}
}
Node.Js + React App, all work fine on localhost, when i push to heroku, Push rejected, idk why.
Please help my heroes.
Thanks for help.

Answer 1

You are directly depending on React 18 but react-paypal-button-v2#2.6.3 (the latest release at the time of writing) is not compatible with that version yet, as described in the error message:
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^0.14.6 || 15.x.x || 16.x.x || 17.x.x" from react-paypal-button-v2#2.6.3
npm ERR! node_modules/react-paypal-button-v2
If you don't need anything in particular from React 18, your best bet is to downgrade to version 17.
If you need React 18, the safest thing to do is to wait for a new version of react-paypal-button that declares a compatible peer dependency. There is an open issue on the project requesting this.
The last option, which I do not recommend, is to ask Heroku to use legacy peer deps behaviour. This behaviour is deprected for a reason, and while it may let your install proceed, it could also lead to unpredictable bugs.

Answer 2

I see you running npm install --prefix frontend at the start of your Heroku logs. It should work if you add the flag --legacy-peer-deps to that command. Just a suggestion, use npm ci instead of the npm install to use the exact same dependencies locally and in the production server (you will have to push the package-lock.json as well, see the command reference: https://docs.npmjs.com/cli/v9/commands/npm-ci).