Application error while deploying react.js project over heroku

Question

i created an application with React.Js which fetches data using API. But when i tried deploying it over Heroku platform, it gave me error : Application Error

I have executed the steps specified on the heroku website, it is as follows:

Install the Heroku CLI
Download and install the Heroku CLI.

If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH public key.

$ heroku login
Clone the repository
Use Git to clone app's source code to your local machine.

$ heroku git:clone -a app-name
$ cd app-name
Deploy your changes
Make some changes to the code you just cloned and deploy them to Heroku using Git.

$ git add .
$ git commit -am "make it better"
$ git push heroku master

It didn't worked!

Here is the log:

2020-06-22T12:40:27.850239+00:00 app[web.1]: > react-scripts start
2020-06-22T12:40:27.850239+00:00 app[web.1]:
2020-06-22T12:40:34.380682+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.125.90/
2020-06-22T12:40:34.381510+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-22T12:40:34.381685+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-22T12:40:34.381845+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-22T12:40:34.382179+00:00 app[web.1]: Starting the development server...
2020-06-22T12:40:34.382181+00:00 app[web.1]:
2020-06-22T12:40:34.546503+00:00 heroku[web.1]: Process exited with status 0
2020-06-22T12:40:34.619734+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-22T14:12:41.785222+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-22T14:12:52.279485+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-22T14:12:55.303019+00:00 app[web.1]:
2020-06-22T14:12:55.303037+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-22T14:12:55.303038+00:00 app[web.1]: > react-scripts start
2020-06-22T14:12:55.303038+00:00 app[web.1]:
2020-06-22T14:12:58.615357+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.197.178/
2020-06-22T14:12:58.616148+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-22T14:12:58.616286+00:00 app[web.1]: ℹ ｢wds��: Content not from webpack is served from /app/public
2020-06-22T14:12:58.616415+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-22T14:12:58.616671+00:00 app[web.1]: Starting the development server...
2020-06-22T14:12:58.616672+00:00 app[web.1]:
2020-06-22T14:12:58.788743+00:00 heroku[web.1]: Process exited with status 0
2020-06-22T14:12:58.845133+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-22T17:03:45.196711+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-22T17:03:58.482038+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-22T17:04:02.420806+00:00 app[web.1]:
2020-06-22T17:04:02.420839+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-22T17:04:02.420839+00:00 app[web.1]: > react-scripts start
2020-06-22T17:04:02.420840+00:00 app[web.1]:
2020-06-22T17:04:09.746354+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.93.82/
2020-06-22T17:04:09.746878+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-22T17:04:09.747007+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-22T17:04:09.747116+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-22T17:04:09.747412+00:00 app[web.1]: Starting the development server...
2020-06-22T17:04:09.747413+00:00 app[web.1]:
2020-06-22T17:04:09.999824+00:00 heroku[web.1]: Process exited with status 0
2020-06-22T17:04:10.062284+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-22T22:50:40.650238+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-22T22:50:48.917468+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-22T22:50:51.112063+00:00 app[web.1]:
2020-06-22T22:50:51.112085+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-22T22:50:51.112086+00:00 app[web.1]: > react-scripts start
2020-06-22T22:50:51.112086+00:00 app[web.1]:
2020-06-22T22:50:53.533795+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.140.22/
2020-06-22T22:50:53.534116+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-22T22:50:53.534199+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-22T22:50:53.534267+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-22T22:50:53.534433+00:00 app[web.1]: Starting the development server...
2020-06-22T22:50:53.534434+00:00 app[web.1]:
2020-06-22T22:50:53.615116+00:00 heroku[web.1]: Process exited with status 0
2020-06-22T22:50:53.658116+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-23T04:30:26.154959+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-23T04:30:33.609175+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-23T04:30:35.459308+00:00 app[web.1]:
2020-06-23T04:30:35.459322+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-23T04:30:35.459322+00:00 app[web.1]: > react-scripts start
2020-06-23T04:30:35.459323+00:00 app[web.1]:
2020-06-23T04:30:37.539192+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.16.168.226/
2020-06-23T04:30:37.539532+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-23T04:30:37.539611+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-23T04:30:37.539677+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-23T04:30:37.539842+00:00 app[web.1]: Starting the development server...
2020-06-23T04:30:37.539843+00:00 app[web.1]:
2020-06-23T04:30:37.607952+00:00 heroku[web.1]: Process exited with status 0
2020-06-23T04:30:37.640598+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-23T09:58:58.290664+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-23T09:59:07.251577+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-23T09:59:10.172374+00:00 app[web.1]:
2020-06-23T09:59:10.172390+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-23T09:59:10.172390+00:00 app[web.1]: > react-scripts start
2020-06-23T09:59:10.172390+00:00 app[web.1]:
2020-06-23T09:59:12.250288+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.17.189.230/
2020-06-23T09:59:12.250803+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-23T09:59:12.250906+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-23T09:59:12.251013+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-23T09:59:12.251258+00:00 app[web.1]: Starting the development server...
2020-06-23T09:59:12.251259+00:00 app[web.1]:
2020-06-23T09:59:12.385028+00:00 heroku[web.1]: Process exited with status 0
2020-06-23T09:59:12.442788+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-23T15:35:27.646908+00:00 heroku[web.1]: State changed from crashed to starting
2020-06-23T15:35:36.951718+00:00 heroku[web.1]: Starting process with command `npm start`
2020-06-23T15:35:39.713025+00:00 app[web.1]:
2020-06-23T15:35:39.713071+00:00 app[web.1]: > covidtracker@0.1.0 start /app
2020-06-23T15:35:39.713071+00:00 app[web.1]: > react-scripts start
2020-06-23T15:35:39.713072+00:00 app[web.1]:
2020-06-23T15:35:42.169764+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.13.178/
2020-06-23T15:35:42.170140+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-06-23T15:35:42.170236+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-06-23T15:35:42.170324+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-06-23T15:35:42.170506+00:00 app[web.1]: Starting the development server...
2020-06-23T15:35:42.170510+00:00 app[web.1]:
2020-06-23T15:35:42.247228+00:00 heroku[web.1]: Process exited with status 0
2020-06-23T15:35:42.285901+00:00 heroku[web.1]: State changed from starting to crashed
2020-06-23T16:23:37.027952+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-007.herokuapp.com request_id=9b037027-7e0b-4a10-900e-9f306494d592 fwd="182.66.42.58" dyno= connect= service= status=503 bytes= protocol=https
2020-06-23T16:23:38.306139+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-007.herokuapp.com request_id=db0251b8-ca7d-49d4-8561-f16d5834ab6f fwd="182.66.42.58" dyno= connect= service= status=503 bytes= protocol=https
2020-06-23T17:37:05.660570+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-007.herokuapp.com request_id=a5b567d5-792c-492a-ba30-566590b7f3bf fwd="182.66.43.250" dyno= connect= service= status=503 bytes= protocol=https
2020-06-23T17:37:06.677313+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-007.herokuapp.com request_id=8fa7e49f-d40e-48af-ba0a-db77420f8138 fwd="182.66.43.250" dyno= connect= service= status=503 bytes= protocol=https
2020-06-23T17:42:09.440304+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=covid-007.herokuapp.com request_id=b786c7e4-c4ff-4ce4-bd9c-139651c61845 fwd="182.66.168.226" dyno= connect= service= status=503 bytes= protocol=https
2020-06-23T17:42:10.695333+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=covid-007.herokuapp.com request_id=f16c168d-3bf6-40fe-ba7c-60c9f5b8199e fwd="182.66.168.226" dyno= connect= service= status=503 bytes= protocol=https

Here is my package.json:

{
  "name": "covidtracker",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^4.10.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "react": "^16.13.1",
    "react-chartjs-2": "^2.9.0",
    "react-countup": "^4.3.3",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
  },
  "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"
    ]
  }
}

Any sort of help would be appreciated as i'm totally clueless!

Answer 1

In Settings change the buildpack to https://github.com/mars/create-react-app-buildpack and then deploy again, this problem will get solved. It worked for me!

Answer 2

I had the same issue. Not sure what's going on behind the scenes but for me it was the react scripts package. After rolling back react-scripts package from 3.4.1 to 3.4.0 it fixed the issue.