TLDR; When updating Ember make sure your bower components match what is in your bower.json file before deploying to Heroku

I definitely underestimated how difficult it would be to keep up with these posts. I’m going to try to be more consistent in writing here and as a result I may write more often about smaller issues that I’m experiencing. Apologies in advance if they’re too specific to my builds to be very helpful to folks or overly simplistic.

So this morning I worked through an issue regarding a deployment to Heroku on an Ember/Rails app that I’m building. I recently went through the process of upgrading to Ember and Ember Data to v2.10. If anyone has any issues about how to upgrade your Ember, Ember-CLI and Ember Data versions you should consult this awesome reference on Ember Igniter by Frank Treacy.

When making an upgrade you may be prompted in the terminal about whether you would like to overwrite certain files in your Ember app. This choice can be a bit daunting at first, especially if you know you have made changes to a particular file, and want to keep those changes, but also don’t want to miss out on the changes that might occur in an updated version of the file is seeking the overwrite. I usually make a copy of the file in question, for instance package.json, and allow the overwrite to occur, and then go back in to back into the file afterwards to add in any necessary customizations I may have made.

Normally I get this done right and don’t have many issues. However, on the upgrade path this time around, I did experience a bit of self-inflicted pain. I updated about a week ago and resolved some initial issues and my build was working well locally all week. That was until I tried to push to our Heroku development server.

remote:  !     Precompiling assets failed.
remote:  !
remote:  !     Push rejected, failed to compile Ruby app.
remote:
remote:  !     Push failed
remote: Verifying deploy...
remote:
remote: !	Push rejected to [MY-APP].

Now, I love Heroku, but I also usually cringe when I see an error on deployment, because it isn’t always easy to debug where your error is actually coming from, especially when you’re not very experienced in devOps. Looking upstream in the server log a bit I saw this error which looked pretty suspicious:

remote:        The Broccoli Plugin: [SimpleConcat: Concat: Vendor /assets/vendor.js] failed with:
remote:        Error: ENOENT: no such file or directory, stat [SOME-PATH-TO-A-FILE-IN-MY-CASE-IT-WAS-A-BOWER-COMPONENT]

Note, I’m leaving out the specific names of the components/files that were causing the errors here as they’re not specific to this issue. Anyway, looking at bower.json file I noticed it was looking pretty sparse. I then noticed that there were several bower components in the bower_components directory that were not in the bower.json file. I then also noticed further upstream in the server log that bower uninstall was being run for each of the components that were not referenced in the bower.json file.

remote:        bower uninstall     [NAME-OF-BOWER-COMPONENT]

Finding an old version of the bower.json file in the git repo allowed me to add those references back in easily. There were a few that I did not add back as they were outdated/unused in our project so I just pruned those components and things were back up and running in no time and the push to Heroku worked!

remote:        Asset precompilation completed (143.87s)
remote:        Cleaning assets
remote:        Running: rake assets:clean

Again, sorry if this is too specific or simple for most folks to be helpful, but I’m going to keep writing about this stuff as I know how terrible it can be wasting precious time on these fixes.