I am stucked trying to deploy my react app on heroku
I have added this buildpack
https://github.com/mars/create-react-app-buildpack
and connected my github account to my heroku account. When I then try to deploy my branch, I get this error
-----> Building on the Heroku-20 stack
-----> Using buildpack: https://github.com/mars/create-react-app-buildpack
-----> React.js (create-react-app) multi app detected
=====! create-react-app-buildpack has reached end-of-life 🌅
This build may succeed, but the buildpack is no longer maintained.
On the Heroku-22 stack and beyond, this may fail to build at all.
Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 16.x...
Downloading and installing node 16.17.0...
Using default npm version: 8.15.0
-----> Installing dependencies
Installing node modules
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! peer react@">=16.3.0" from @emotion/[email protected]
npm ERR! node_modules/@emotion/core
npm ERR! @emotion/core@"^10.0.9" from [email protected]
npm ERR! node_modules/react-select
npm ERR! react-select@"3.2.0" from the root project
npm ERR! 63 more (@emotion/react, @emotion/styled, @fullcalendar/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.3.0" from [email protected]
npm ERR! node_modules/react-redux-firebase
npm ERR! react-redux-firebase@"^3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16.3.0" from [email protected]
npm ERR! node_modules/react-redux-firebase
npm ERR! react-redux-firebase@"^3.0.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! See /tmp/npmcache.tI25s/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.tI25s/_logs/2022-09-09T18_19_50_873Z-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
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile React.js (create-react-app) multi app.
! Push failed
package.json
{
"name": "ocyu-v1",
"version": "6.2.0",
"private": true,
"dependencies": {
"@date-io/core": "1.3.13",
"@date-io/date-fns": "1.3.13",
"@emotion/react": "^11.9.3",
"@emotion/styled": "^11.9.3",
"@fullcalendar/daygrid": "5.9.0",
"@fullcalendar/interaction": "5.9.0",
"@fullcalendar/react": "5.9.0",
"@fullcalendar/timegrid": "5.9.0",
"@hookform/resolvers": "2.7.1",
"@material-ui/core": "4.12.3",
"@material-ui/data-grid": "4.0.0-alpha.37",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "4.0.0-alpha.60",
"@material-ui/pickers": "3.3.10",
"@mui/icons-material": "^5.8.4",
"@mui/material": "^5.8.6",
"@reduxjs/toolkit": "^1.8.3",
"apexcharts": "3.27.3",
"auth0-lock": "11.30.4",
"autosuggest-highlight": "3.1.1",
"axios": "0.21.1",
"axios-mock-adapter": "1.19.0",
"chart.js": "2.9.4",
"clsx": "1.1.1",
"cross-fetch": "3.1.4",
"date-fns": "2.23.0",
"draft-js": "0.11.7",
"draftjs-to-html": "0.9.1",
"firebase": "^8.10.1",
"formsy-react": "2.2.5",
"framer-motion": "4.1.17",
"google-map-react": "2.1.10",
"history": "4.10.1",
"i18next": "20.4.0",
"jsonwebtoken": "8.5.1",
"jss": "10.6.0",
"jss-plugin-extend": "10.7.1",
"jss-rtl": "0.3.0",
"jwt-decode": "2.2.0",
"keycode": "2.2.0",
"lodash": "4.17.21",
"marked": "0.8.2",
"material-ui-popup-state": "1.9.0",
"mobile-detect": "1.4.5",
"moment": "2.29.1",
"notistack": "1.0.10",
"path-to-regexp": "3.2.0",
"perfect-scrollbar": "1.5.2",
"prismjs": "1.24.1",
"prop-types": "15.7.2",
"qs": "6.10.1",
"raw-loader": "4.0.2",
"react": "^17.0.2",
"react-apexcharts": "1.3.9",
"react-autosuggest": "10.1.0",
"react-beautiful-dnd": "13.1.0",
"react-chartjs-2": "2.11.2",
"react-dom": "17.0.2",
"react-draft-wysiwyg": "1.14.7",
"react-draggable": "4.4.3",
"react-easy-crop": "^4.4.1",
"react-frame-component": "4.1.3",
"react-hook-form": "7.12.2",
"react-i18next": "11.11.4",
"react-masonry-css": "1.0.16",
"react-number-format": "4.7.3",
"react-paystack": "^4.0.1",
"react-popper": "1.3.11",
"react-redux": "^7.2.4",
"react-redux-firebase": "^3.0.0",
"react-router": "5.2.0",
"react-router-config": "5.1.1",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.3",
"react-select": "3.2.0",
"react-spring": "^8.0.23",
"react-swipe": "^6.0.4",
"react-swipeable": "6.1.2",
"react-swipeable-views": "0.14.0",
"react-swipeable-views-utils": "0.14.0",
"react-table": "7.7.0",
"react-text-mask": "5.4.3",
"react-tinder-card": "^1.4.5",
"react-toastify": "^8.2.0",
"react-virtualized": "9.22.3",
"react-window": "1.8.6",
"react-with-gesture": "^4.0.2",
"reactfire": "^4.2.1",
"redux-firestore": "^0.5.8",
"redux-logger": "4.0.0",
"redux-persist": "^6.0.0",
"styled-components": "5.3.0",
"swipe-js-iso": "^2.1.5",
"typeface-poppins": "1.1.13",
"uuid": "^8.3.2",
"velocity-animate": "1.5.2",
"velocity-react": "1.4.3",
"web-vitals": "2.1.0",
"yup": "0.32.9"
},
"peerDependencies": {
"autoprefixer": "9.8.6",
"postcss": "7.0.36",
"react-dom": "17.0.2"
},
"resolutions": {
"react": "17.0.2",
"react-dom": "17.0.2",
"babel-loader": "8.1.0"
},
"devDependencies": {
"@babel/core": "7.14.5",
"@babel/node": "7.14.5",
"@babel/preset-env": "7.14.5",
"@craco/craco": "^6.2.0",
"@typescript-eslint/eslint-plugin": "^4.29.1",
"@typescript-eslint/parser": "^4.29.1",
"@yarnpkg/pnpify": "3.0.1",
"autoprefixer": "9.8.6",
"babel-eslint": "10.1.0",
"cross-env": "7.0.3",
"eslint": "7.32.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"eslint-plugin-unused-imports": "^1.1.3",
"js-beautify": "1.13.13",
"postcss": "7.0.36",
"prettier": "^2.3.2",
"promise": "8.1.0",
"source-map-explorer": "2.5.2",
"tailwindcss": "npm:@tailwindcss/[email protected]",
"tailwindcss-dir": "4.0.0"
},
"scripts": {
"start": "craco start",
"build": "cross-env GENERATE_SOURCEMAP=false craco build",
"test": "craco test --env=node",
"eject": "craco eject",
"build-docs": "find ./src/app/main/documentation/material-ui-components \\( -name '*.ts' -o -name '*.tsx' \\) -type f -delete && babel-node --presets @babel/preset-env src/app/main/documentation/material-ui-components/build.js",
"analyze": "craco build && source-map-explorer 'build/static/js/*.js' --html analyze-result.html",
"pnpify-sdk": "yarn pnpify --sdk",
"lint": "eslint"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 3 safari version"
]
}
}
I have deployed the same project on netlify and it deployed successfully, but having issues deploying on heroku.
Looking at the https://github.com/mars/create-react-app-buildpack Github page, I see that the project has been end-of-lifed and they say that it won't be supported on Heroku 22+.
After a long, useful run, this buildpack is now at its end of life 🌅 The underlying static web server buildpack is deprecated and will not be supported on Heroku-22 or newer stacks.
Looking at your console logs, we can see that you are trying to deploy to Heroku 22.
-----> Building on the Heroku-22 stack
Finally, you can see a warning in the console logs stating that the build may fail because of the deprecated buildpack:
This build may succeed, but the buildpack is no longer maintained.
On the Heroku-22 stack and beyond, this may fail to build at all.
Please consider migrating to https://nextjs.org or https://remix.run to develop React apps which are deployable using Heroku's Node.js buildpack https://github.com/heroku/heroku-buildpack-nodejs, or you may develop your own create-react-app deployment with Node.js and Nginx buildpacks.
Unfortunately, the buildpack you are using isn't supported by Heroku 22 so you won't be able to deploy to Heroku with your current project. You'll need to find an alternative buildpack or use nextjs or remix.
Solution
A quick band-aid solution is to downgrade the Heroku stack version you are using to one that supports this buildpack. You may change the stack on an existing app; the next build performed will then use the new stack:
heroku stack:set heroku-20
Be aware that the Heroku-20 stack will be deprecated in 2025. '
Edit:
Root Issue
Heroku is unable to install dependencies because of a dependency issue.
Root Solution
You can force install dependencies on Heroku by creating an .npmrc file in the root of the project with the following flags
force=true
legacy-peer-deps=true
Pushing this to Heroku will solve your problem.