Heroku Build fails with 'missing script: build'

[jar349]

What I did:

• I created a react app with create-react-app
• I ran heroku app:create and passed the create-react-app-buildpack url in the --buildpack argument.
• I went to heroku and connected my app to github.
• I wrote a static.json for nginx, as per your instructions in the buildpack repo.
• I pushed my app to master and saw that this build worked.

And everything worked. Then, I realized that I wanted to add authentication and to deliver a node backend as well, so I found this repository and tried to follow the instructions.

• I did heroku --app my-app config:unset <buildpack_url>
• I created a folder called react-ui and moved my react app under it
• I created the index.js for the express app
• I created the package.json for the express app (name is my-app)
• I added the proxy config in the package.json of the react app and renamed it (my-app-ui)

And when I run these two locally via npm install && npm start they both start, and they work together - the react app reaches out to the express app, which returns data. Hooray!

Then, I push to my master branch to kick off a heroku build - but the build fails. I'm going to post the build log right after this paragraph, and you'll see that it's complaining about a missing script called build. At first, I thought it wasn't finding the build script for the react-ui, but look closer at the log and you'll see that the react-ui app builds successfully. In fact, you can see that each part of the heroku-postbuild command runs successfully. So I don't know which 'build' is not being found. I do note that the create-react-app-inner-buildpack writes out a static.json - which is weird because I no longer want an nginx front-end, but the node backend that I've just provided.

-----> React.js (create-react-app) multi app detected
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
=====> Detected Framework: Multipack
=====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
=====> Detected Framework: Node.js
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=false
       NODE_VERBOSE=false
       NODE_ENV=development
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  6.9.x
       engines.npm (package.json):   unspecified (use default)
       
       Resolving node version 6.9.x via semver.io...
       Downloading and installing node 6.9.5...
       Using default npm version: 3.10.10
-----> Restoring cache
       Skipping cache restore (new runtime signature)
-----> Building dependencies
       Installing node modules (package.json)
       my-app@1.0.0 /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a
      <snipped all the npm install stuff>

      Running heroku-postbuild
       
       > my-app@1.0.0 heroku-postbuild /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a
       > cd react-ui/ && npm install --only=dev && npm install && npm run build
       
       my-app-ui@0.1.0 /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
       <snipped npm install stuff>

      my-app-ui@0.1.0 /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
      <snipped npm install stuff>

       > my-app-ui@0.1.0 build /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/react-ui
       > react-scripts build
       
       Creating an optimized production build...
       Compiled successfully.
       
       File sizes after gzip:
       
       116.49 KB  build/static/js/main.9dde2828.js
       314 B      build/static/css/main.97c43581.css
       
       The project was built assuming it is hosted at the server root.
       To override this, specify the homepage in your package.json.
       For example, add this to build it for GitHub Pages:
       
       "homepage": "http://myname.github.io/myapp",
       
       The build folder is ready to be deployed.
       You may also serve it locally with a static server:
       
       npm install -g pushstate-server
       pushstate-server build
       open http://localhost:9000
       
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (package.json):
       - node_modules
       - react-ui/node_modules
-----> Build succeeded!
=====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
=====> Detected Framework: React.js (create-react-app)
       Writing `static.json` to support create-react-app
       Enabling runtime environment variables
npm ERR! Linux 3.13.0-110-generic
npm ERR! argv "/tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/.heroku/node/bin/node" "/tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/.heroku/node/bin/npm" "run" "build"
npm ERR! node v6.9.5
npm ERR! npm  v3.10.10
npm ERR! missing script: build
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>
npm ERR! Please include the following file with any support request:
npm ERR!     /tmp/build_658494bc568082290fd55dab3cd2145e/org-my-app-f27879f8323ffc9b378e383271603d4539b8ad6a/npm-debug.log
 !     Push rejected, failed to compile React.js (create-react-app) multi app.
 !     Push failed

[mars]

I see that the app is still being built with create-react-app-buildpack.

Run heroku buildpacks to check what buildpacks are set. I suspect your attempt to unset the buildpack was not correct; see heroku buildpacks --help for those commands.

Try heroku buildpacks:clear then retry the deployment.

[jar349]

That was exactly the problem. One of the apps in the pipeline still had the create-react-app-buildpack set. The clear command caused the detection and the deploy to work correctly, thanks!

I suspect that my story is a common scenario? Start with a React app and then try to move to this? Maybe it's worth adding a line in the README.md just in case someone else makes the same mistake.

Great buildpack, btw. Really appreciate your examples - they've helped me to get up and running.

[mars]

Happy that fixed it!

Thanks for the feedback. I added "Switching from create-react-app-buildpack" to the docs.