React app runs locally, crashes when on Heroku error code=H10

Viewed 15685

The app runs fine after an 'npm start' in windows, but when I pull from github into Heroku I just get an error.

package.json:

{
  "name": "tic-tac-toe",
  "version": "0.1.0",

  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "engines": {
      "node": "6.10.3",
      "npm":"3.10.10"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

and the error log:

 app[web.1]: npm ERR!     npm bugs tic-tac-toe
 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
 app[web.1]: npm ERR!     npm owner ls tic-tac-toe
 app[web.1]: npm ERR! There is likely additional logging output above.
 app[web.1]: 
 app[web.1]: npm ERR! Please include the following file with any support request:
 app[web.1]: npm ERR!     /app/npm-debug.log
 heroku[web.1]: Process exited with status 1
 heroku[web.1]: State changed from starting to crashed
 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-tac-to.herokuapp.com request_id=c3cf2461-1989-4734-a7d5-157eb81c9643 fwd="24.29.73.46" dyno= connect= service= status=503 bytes= protocol=https
 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-tac-to.herokuapp.com request_id=05109629-cbb4-4927-9d13-8a3a37fedb93 fwd="24.29.73.46" dyno= connect= service= status=503 bytes= protocol=https

The nature of the problem makes me think this is configuration based, and not in the main app.js code. the main file is slightly long, so I'll link to it on Github if you want to see it: https://github.com/owenpercoco/React-Tac-Toe

5 Answers

I had the same problem, but the solution above did not work for my react app in Heroku. I have updated the build pack to create-react-app, and it worked for me.

heroku buildpacks:set mars/create-react-app

Just npm i serve to install serve then or you could use yarn instead of npm

You can change your scripts in package.json file, it seemed to be caused by update by react.

"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"heroku-postbuild": "npm run build"}

Hope it fixes your problem.

1.) npm install serve --save or yarn install serve --save in your terminal

"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
}

2.) copied the above code in place of previous code "scripts" in my package.json file

3.) git commit -am "new update"

4.) git push heroku master

  • Note: the common problem is missing the first step.

I face the same problem, it has worked for me.

add "serve" to application.

example: npm add serve or yarn add serve

after change scripts in package.json

"scripts": {
  "dev": "react-scripts start",
  "start": "serve -s build",
  "build": "react-scripts build",
  "heroku-postbuild": "npm run build"
}
Related