问题
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
回答1:
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.
回答2:
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.
来源：https://stackoverflow.com/questions/44837575/react-app-crashes-on-heroku-after-using-npm-install