0

My ReactJS app always crashes whenever I npm install any module.

You can reproduce the problem by doing this on the terminal.

create-react-app [name of project]
cd [name of project]
git init
heroku git:remote -a [name of heroku app]
git add .
git commit -m "init"
git push heroku master

You will see that everything works fine, but try this afterwards.

npm install react-dom
(or any package/modules. Using --save also produces the same error)

git add -u
git commit -m "new module"
git push heroku master

The app will crash on the server and I don't know why.

Note: In this case, react-dom was already installed by create-react-app, so npm only updates it. Still, it crashes. You can install a new module, and it will still behave the same.

As requested, here are the error logs.

2017-06-30T20:12:46.778184+00:00 app[web.1]: npm ERR! spawn ENOENT
2017-06-30T20:12:46.778396+00:00 app[web.1]: npm ERR! 
2017-06-30T20:12:46.778645+00:00 app[web.1]: npm ERR! Failed at the 007-test@0.1.0 start script.
2017-06-30T20:12:46.779136+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2017-06-30T20:12:46.780482+00:00 app[web.1]: 
2017-06-30T20:12:46.780763+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2017-06-30T20:12:46.780934+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2017-06-30T20_12_46_768Z-debug.log
2017-06-30T20:12:46.920375+00:00 heroku[web.1]: State changed from starting to crashed
2017-06-30T20:12:46.903436+00:00 heroku[web.1]: Process exited with status 1
2017-06-30T21:01:33.667285+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-app-007.herokuapp.com request_id=d4936b9c-4c21-4ce4-862c-8b05da3bc005 fwd="64.62.224.29" dyno= connect= service= status=503 bytes= protocol=https
2017-06-30T21:01:35.111452+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-app-007.herokuapp.com request_id=cef9f3f8-a46b-4760-9c24-de59ba540e2e fwd="64.62.224.29" dyno= connect= service= status=503 bytes= protocol=https
Vongdarakia
  • 379
  • 1
  • 12
  • 25
  • Have you tried these steps? https://devcenter.heroku.com/articles/troubleshooting-node-deploys – hridayns Jun 30 '17 at 02:19
  • Just tried it. Didn't work out :/ – Vongdarakia Jun 30 '17 at 02:37
  • Can you post what the Heroku error logs look like? They can be found at `https://dashboard.heroku.com/apps//logs`. If nothing is there, on the command line within the same directory as your project run `heroku logs -n 500` (most recent 500 lines from the logs should be enough) – Pat Needham Jun 30 '17 at 02:47
  • @Vongdarakia It seems like you tried all those steps really fast. There are a lot of steps, for example checking the node version mentioned in the `package.json` file and seeing if its the same as your local node version. Are you sure you tried all of that? And yeah, please do try what @PatNeedham is requesting. I think that might help too. – hridayns Jun 30 '17 at 04:05
  • @code_byter I just checked the versions. My local npm and node were behind, so I updated them. I still had no problem running the app locally. – Vongdarakia Jun 30 '17 at 21:21
  • @PatNeedham I added the error logs for you. – Vongdarakia Jun 30 '17 at 21:21

2 Answers2

6

This sequence of commands should do the trick:

npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open

I think adding that custom buildpack for React (-b https://github.com/mars/create-react-app-buildpack.git) is what you're missing. Under the settings tab of your Heroku project's dashboard you can add buildpacks to already existing projects.

-b flag is short for --buildpack

$ heroku help create
Usage: heroku create [APP] [flags]

creates a new app

Flags:
 -b, --buildpack  buildpack url to use for this app
 -n, --no-remote  do not create a git remote
 -o, --org        organization to use
 -r, --remote     the git remote to create, default "heroku"
 -s, --stack      the stack to create the app on
 -t, --team       team to use
 --addons         comma-delimited list of addons to install
 --region         specify region for the app to run in
 --space          the private space to create the app in
 --ssh-git        use SSH git protocol for local git remote

This is the version of the heroku cli on my computer:

$ heroku --version
heroku-cli/6.12.0-a504409 (darwin-x64) node-v7.10.0

For info specific to the buildpacks command:

$ heroku help buildpacks
Usage: heroku buildpacks [flags]

display the buildpack_url(s) for an app

Flags:
 -a, --app     (required) app to run command against
 -r, --remote  git remote of app to use

Examples:
    $ heroku buildpacks

heroku buildpacks commands: (get help with heroku help buildpacks:COMMAND)
 buildpacks               display the buildpack_url(s) for an app
 buildpacks:add URL       add new app buildpack, inserting into list of buildpacks if necessary
 buildpacks:clear         clear all buildpacks set on the app
 buildpacks:remove [URL]  remove a buildpack set on the app
 buildpacks:set URL       set new app buildpack, overwriting into list of buildpacks if necessary

You can run heroku buildpacks:add https://github.com/mars/create-react-app-buildpack.git instead of adding that buildpack through the web dashboard.

Pat Needham
  • 5,698
  • 7
  • 43
  • 63
  • The -b flag works the same way as the -a flag, only that -b is creating a new git, and -a is adding to an existing git – Vongdarakia Jun 30 '17 at 21:58
  • @Vongdarakia -b is for creating a new git branch if you used it like `git checkout -b my-new-branch`. When used as a flag to `heroku create` it has a different context – Pat Needham Jul 01 '17 at 00:03
  • I see. I just figured out my problem though. I'll post the answer soon. – Vongdarakia Jul 01 '17 at 02:19
1

After some debugging, I found the root error. When I npm installed a package, it messed with the build. The module react-scripts wasn't working anymore.

I moved it from devDependencies to dependencies in package.json, removed my node modules, package-lock.json, and reinstalled everything, and that worked locally. So, I deployed it, and everything works fine now.

Vongdarakia
  • 379
  • 1
  • 12
  • 25