Rails 5 + Webpacker app deploys to Heroku as blank page with no failures Rails 5 + Webpacker app deploys to Heroku as blank page with no failures vue.js vue.js

Rails 5 + Webpacker app deploys to Heroku as blank page with no failures


This ended up being a problem with my Vue runtime configuration. As you may know, if you're using vue-loader with Webpack, your Vue templates are precompiled into render functions. Then you do not have to load the Vue runtime in production because no templates are compiled on-the-fly (like they typically are in development).

The problem was my Vue bootstrap code which creates and mounts the root element. I was calling new Vue({el: '#app', ...}) (with <div id="app"><my-content-here /></div>), but that in itself is an uncompiled template and won't work in production.

The solution was instead to write a precompiled template with its own render function, and mount that: new Vue({render: function() { ... }}).$mount(document.getElementByID('app')). In my case I just created a very simple .vue file that contains the root <router-view> div (for Vue-Router), imported that, and $mounted it.