CODEWITHSUNDEEP
reactjsheroku
Garrett Hughes
Garrett Hughes

Reputation: 41

React app runs locally but crashes on Heroku

I've spent 6+ hours trying to figure out why this won't run successfully on Heroku. It runs locally but when I deploy to Heroku I get the following log basically just saying the app crashed. I installed Heroku's CLI and tried to find a more helpful error in that but to no avail. Anyone else have any ideas or suggestions?

Code => https://github.com/ghughes13/react-todo-list

https://ghughes-react-todo-list.herokuapp.com/

2020-04-05T14:46:31.351885+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Project is running at http://172.18.176.170/
2020-04-05T14:46:31.355002+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: webpack output is served from 
2020-04-05T14:46:31.355159+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: Content not from webpack is served from /app/public
2020-04-05T14:46:31.355252+00:00 app[web.1]: [34mℹ[39m [90m｢wds｣[39m: 404s will fallback to /
2020-04-05T14:46:31.355468+00:00 app[web.1]: Starting the development server...
2020-04-05T14:46:31.355470+00:00 app[web.1]: 
2020-04-05T14:46:31.498661+00:00 heroku[web.1]: State changed from starting to crashed
2020-04-05T14:46:33.839876+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=ghughes-react-todo-list.herokuapp.com request_id=199836cb-d38a-4941-aee7-fc5e5deba5dc fwd="97.99.41.155" dyno= connect= service= status=503 bytes= protocol=https
2020-04-05T14:46:34.454912+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=ghughes-react-todo-list.herokuapp.com request_id=b905fff4-83bf-4319-801a-c2c4f1d7a4e1 fwd="97.99.41.155" dyno= connect= service= status=503 bytes= protocol=https

  "name": "todo-list",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reach/router": "^1.3.3",
    "axios": "^0.19.2",
    "mongodb": "^3.5.2",
    "mongodb-client-encryption": "^1.0.1",
    "mongoose": "^5.8.11",
    "reach": "^1.0.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "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"
    ]
  }
}

Upvotes: 1

Views: 1811

Answers (3)

Mritunjay Pathak
Mritunjay Pathak

Reputation: 83

run

npm install --save serve

and then in your package.json change

"start": "react-scripts start"

to

"start": "serve -s build"

Actually, with the new version, there is a problem I don't know why. This is a workaround may be the fix it later

Upvotes: 4

Raqun Bob
Raqun Bob

Reputation: 153

Garrett gave me good information about how I can fix it but did not explain how he fixed the situation clearly, I sent the link here in case you guys don't wanna struggle 1 more hour like me:

if you have react-app and have the same error changing your buildpack from basic heroku/node-js to create-react-app-buildpack will most likely fix it:

https://elements.heroku.com/buildpacks/mars/create-react-app-buildpack

on terminal/cmd:

   heroku buildpacks:set https://github.com/mars/create-react-app-buildpack.git#v6.0.0

then push your react-app again

Upvotes: 5

Garrett Hughes
Garrett Hughes

Reputation: 41

So it looks like using heroku/nodejs for the build was causing the issue. Not sure why, because I've been slowly adding to this project for 2-3 months and it worked fine up until I added reach-router (But then when I removed reach router it still didn't work...).

Anyways changing the build pack to this fixed it: https://buildpack-registry.s3.amazonaws.com/buildpacks/mars/create-react-app.tgz

Upvotes: 2

Related Questions