Getting error while trying to deploy react app on heroku

Question

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.

Could you post your package.json as well?

g0rb
– g0rb

2022-09-09 16:52:44 +00:00
Commented Sep 9, 2022 at 16:52 — g0rb
– g0rb, Commented Sep 9, 2022 at 16:52
@g0rb I have updated it with the package.json

Otis
– Otis

2022-09-09 16:55:59 +00:00
Commented Sep 9, 2022 at 16:55 — Otis
– Otis, Commented Sep 9, 2022 at 16:55

g0rb · Accepted Answer · 2022-09-09 21:32:13Z

3

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.

edited Sep 9, 2022 at 21:32

answered Sep 9, 2022 at 17:20

g0rb

2,3891 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Otis Over a year ago

Thank you for looking into it, Can you kindly share more about the alternatives on how I can successfully deploy on heroku

g0rb Over a year ago

@Otis I updated my answer to have a solution that lets you push to heroku,

Otis Over a year ago

Thank you, though am still having the same error

g0rb Over a year ago

@Otis Can you post latest error please.

Otis Over a year ago

Thank you for your time, I have updated my error with the latest heroku error

|

Collectives™ on Stack Overflow

Getting error while trying to deploy react app on heroku

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related