package-lock.json causes "react-scripts: not found" when deploying

[joshboyan]

I am having a difficult time getting this deployed once I add some more code to the repo.

It works just as expected locally with the npm run start and npm run build commands.

I have been searching stack overflow and haven't found anything. I have even tried to add react-scripts to the Dependencies as well but am still getting this print out when I deploy.

($ git push heroku master
Counting objects: 7, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 639 bytes | 0 bytes/s, done.
Total 7 (delta 4), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Node.js app detected
remote:
remote: -----> Creating runtime environment
remote:
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:
remote: -----> Installing binaries
remote:        engines.node (package.json):  6.9.x
remote:        engines.npm (package.json):   unspecified (use default)
remote:
remote:        Resolving node version 6.9.x via semver.io...
remote:        Downloading and installing node 6.9.5...
remote:        Detected package-lock.json: defaulting npm to version 5.x.x
remote:        Resolving npm version 5.x.x via semver.io...
remote:        Downloading and installing npm 5.0.4 (replacing version 3.10.10).
..
remote:
remote: -----> Restoring cache
remote:        Loading 2 from cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (not cached - skipping)
remote:
remote: -----> Building dependencies
remote:        Installing node modules (package.json)
remote:        removed 1185 packages in 18.503s
remote:        Running heroku-postbuild
remote:
remote:        > [email protected] heroku-postbuild /tmp/build_cf752754736fe
7ea551ef5c015e7debe
remote:        > cd react-ui/ && npm install --only=dev && npm install && npm ru
n build
remote:
remote:        added 1069 packages in 31.462s
remote:        removed 1069 packages in 22.593s
remote:
remote:        > [email protected] build /tmp/build_cf752754736fe7ea5
51ef5c015e7debe/react-ui
remote:        > react-scripts build
remote:
remote: sh: 1: react-scripts: not found
remote: npm ERR! file sh
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno ENOENT
remote: npm ERR! syscall spawn
remote: npm ERR! [email protected] build: `react-scripts build`
remote: npm ERR! spawn ENOENT
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additi
onal logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-07-01T00_08_13_208Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] heroku-postbuild: `cd react-ui/ && npm in
stall --only=dev && npm install && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additi
onal logging output above.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2017-07-01T00_08_13_224Z-debug.log
remote:
remote: -----> Build failed
remote:
remote:        We're sorry this build is failing! You can troubleshoot common is
sues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploy
s
remote:
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:
remote:        Love,
remote:        Heroku
remote:
remote:  !     Push rejected, failed to compile Node.js app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !       Push rejected to immense-escarpment-58375.
remote:
To https://git.heroku.com/immense-escarpment-58375.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/immense-escarpment-58
375.git')

I found that if I set NPM_CONFIG_PRODUCTION=false it compiles without any errors and deploys but I just get a 503 error when I check the site.

Also, while troubleshooting this I ran the heroku post-build hook cd react-ui/ && npm install --only=dev && npm install && npm run build locally from the parent directory and got this message.

Creating an optimized production build...
Failed to compile.

Module not found: Error: Can't resolve 'react' in 'C:\Users\Josh\Desktop\project
s\heroku-appt\react-ui\src'

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Josh\AppData\Roaming\npm-cache\_logs\2017-07-01T00_11_29_2
95Z-debug.log

If the rest of the source would help you can see it here

[mars]

I just performed a test clone & deploy as directed in the README from master. It deployed successfully.

So, what is going on with your setup? Something has been committed or set that is causing this…

I see that some of the node modules cache directives have been removed, but the NODE_MODULES_CACHE=true is still set during compile. Not sure if that effects this problem.

Regarding moving react-scripts to dependencies, I agree that would probably fix it, but I see in react-ui/package.json that react-scripts is still in devDependencies.

[mars]

…continuing to think about this issue:

I see that npm 5's new package-lock.json file is present. Perhaps the npm install --only-dev trick used in heroku-postbuild no longer works as intended with npm 5.

I'll investigate further.

[mars]

Confirmed, I can now reproduce by committing npm 5's package-lock.json:

remote:        > [email protected] build /tmp/build_422e8ad9ada1b9f372cc9fc82eb8ade0/react-ui
remote:        > react-scripts build
remote:        
remote: sh: 1: react-scripts: not found

[mars]

I've opened PR with a fix #10

The solution is to replace the package.json "heroku-postbuild" entry with:

"cd react-ui/ && npm install --only=dev && NODE_ENV=development npm install --no-shrinkwrap && npm run build"

Here's the change in context.

[mars]

…originally proposed solution is just as valid:

Move react-scripts to dependencies in react-ui/ package, instead of devDependencies.

[joshboyan]

OK. So I am not getting that warning anymore and the build is successful, compressed and released.

But... When I open the app I get an application error page. I am not getting any error messages form the build log and only a 503 in the console on the page.

I have ran npm start and npm build locally and run as expected with no errors.

I also tested deploying with and without the node module cache directives. I have kept the rest of the configuration as you prescribed in the readme and only added some modules for the API I am using.

Do you have any suggestions on how to proceed?

[mars]

To diagnose a 503, which typically means that the web process is crashing, run:

heroku restart && heroku logs -t

What does it output as the web process starts up and then as you make requests to the app?

[joshboyan]

That was the nudge I needed. The remaining issues had to do with my configuration but I fixed them using the messages from heroku log. Now everything is resolved and working as expected. Thanks for the help @mars!

[mars]

Excellent @joshboyan 🥂