Im trying to deploy on Heroku and i am stuck with some dependecy problems. When I try to deploy with frontend node app I get the following error:
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): ^16.18.23
engines.npm (package.json): 9.6.5
Resolving node version ^16.18.23...
Downloading and installing node 16.20.0...
Bootstrapping npm 9.6.5 (replacing 8.19.4)...
npm 9.6.5 installed
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @material-ui/styles@4.11.5
npm ERR! Found: @types/react@18.2.0
npm ERR! node_modules/@types/react
npm ERR! @types/react@"^18.2.0" from the root project
npm ERR! peerOptional @types/react@"*" from @material-ui/types@5.1.0
npm ERR! node_modules/@material-ui/types
npm ERR! @material-ui/types@"5.1.0" from @material-ui/styles@4.11.5
npm ERR! node_modules/@material-ui/styles
npm ERR! @material-ui/styles@"^4.11.5" from the root project
npm ERR! 9 more (@mui/base, @mui/icons-material, @mui/material, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
npm ERR! node_modules/@material-ui/styles
npm ERR! @material-ui/styles@"^4.11.5" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @types/react@17.0.58
npm ERR! node_modules/@types/react
npm ERR! peerOptional @types/react@"^16.8.6 || ^17.0.0" from @material-ui/styles@4.11.5
npm ERR! node_modules/@material-ui/styles
npm ERR! @material-ui/styles@"^4.11.5" 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!
npm ERR! For a full report see:
npm ERR! /tmp/npmcache.CSqFU/_logs/2023-04-25T19_52_14_561Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /tmp/npmcache.CSqFU/_logs/2023-04-25T19_52_14_561Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
I understand that this is a dependecy problem in my package.json file and I think I understand that the problem (according to the error message) is that my @material-ui/types@5.1.0 wants the the version 16.8.6 or 17.0.0 of @types/react. So if I fix this problem and change it to 17.0.0 it will ask me to do the same for react and react-dom. But when I have fixed all of them. I get this error instead
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): ^16.18.23
engines.npm (package.json): 9.6.5
Resolving node version ^16.18.23...
Downloading and installing node 16.20.0...
Bootstrapping npm 9.6.5 (replacing 8.19.4)...
npm 9.6.5 installed
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @testing-library/react@13.4.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.0" from the root project
npm ERR! peer react@">=16.8.0" from @emotion/react@11.10.6
npm ERR! node_modules/@emotion/react
npm ERR! @emotion/react@"^11.10.6" from the root project
npm ERR! peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.6
npm ERR! node_modules/@emotion/styled
npm ERR! @emotion/styled@"^11.10.6" from the root project
npm ERR! 4 more (@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)
npm ERR! 4 more (@mui/material, @mui/styled-engine, @mui/system, @mui/x-date-pickers)
npm ERR! 17 more (@emotion/styled, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.4.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.4.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.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /tmp/npmcache.N6UAz/_logs/2023-04-25T20_19_13_720Z-eresolve-report.txt
npm ERR! A complete log of this run can be found in: /tmp/npmcache.N6UAz/_logs/2023-04-25T20_19_13_720Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed
So @testing-library wants react in version 18 and material ui wants it in 17. What do i do?
This is my package before any changes:
{
"name": "mui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@material-ui/styles": "^4.11.5",
"@mui/icons-material": "^5.11.16",
"@mui/material": "^5.11.16",
"@mui/x-date-pickers": "^6.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.23",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"dayjs": "^1.11.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
},
"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"
]
},
"devDependencies": {
"prettier": "2.8.7"
},
"engines": {
"node": "^16.18.23",
"npm": "9.6.5"
}
}
Extra info, with the above package it compiles/runs locally with no problem.
As it worked in local but not Heroku, I knew it would work with the dependecy problem. By adding the Config Var NPM_CONFIG_LEGACY_PEER_DEPS with value true. It will run anyway