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

Question

I have a straightforward Rails 5.1 app that uses Webpacker and Vue.js. It works perfectly in development with webpack-dev-server. When I push to the Heroku repository it completes with no errors and nothing seemingly out of the ordinary. The HTML page renders but the <div id="app"> element where the Vue.js app is supposed to be rendered is replaced only by a comment:

<!--function (e,n,r,o){return on(t,e,n,r,o,!0)}-->

The JavaScript pack file is indeed there and I looked at it and it seems to be all correct.

I tried replacing the normal Ruby buildpack with a Node.js Buildpack followed by a Ruby Buildpack but to no avail. This is the full Heroku deploy log:

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)

       Resolving node version 8.x...
       Downloading and installing node 8.9.4...
       Using default npm version: 5.6.0
       Resolving yarn version 1.x...
       Downloading and installing yarn (1.4.0)...
       Installed yarn 1.4.0
-----> Restoring cache
       Skipping cache restore (not-found)
-----> Building dependencies
       Installing node modules (yarn.lock)
       yarn install v1.4.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
       warning " > [email protected]" has unmet peer dependency "css-loader@*".
       warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
       warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
       [4/4] Building fresh packages...
       Done in 20.38s.
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
 !     Unmet dependencies don't fail yarn install but may cause runtime issues
       https://github.com/npm/npm/issues/7494
-----> Ruby app detected
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.5.0
-----> Installing dependencies using bundler 1.15.2
       Running: bundle install --without development:test --path vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       Fetching gem metadata from https://rubygems.org/.........
       Fetching version metadata from https://rubygems.org/..
       Fetching dependency metadata from https://rubygems.org/.
       Using rake 12.3.0
       Using concurrent-ruby 1.0.5
       Using minitest 5.11.3
       Using thread_safe 0.3.6
       Using builder 3.2.3
       Using erubi 1.7.0
       Using mini_portile2 2.3.0
       Using crass 1.0.3
       Using rack 2.0.4
       Using nio4r 2.2.0
       Using websocket-extensions 0.1.3
       Using mini_mime 1.0.0
       Using arel 8.0.0
       Using execjs 2.7.0
       Using bundler 1.15.2
       Using ffi 1.9.18
       Using multi_json 1.13.1
       Using method_source 0.9.0
       Using pg 0.21.0
       Using puma 3.11.2
       Using thor 0.20.0
       Using rb-fsevent 0.10.2
       Using redcarpet 3.4.0
       Using tilt 2.0.8
       Using temple 0.8.0
       Using yard 0.9.12
       Using i18n 0.9.3
       Using tzinfo 1.2.5
       Using nokogiri 1.8.2
       Using rack-test 0.8.2
       Using rack-proxy 0.6.3
       Using sprockets 3.7.1
       Using autoprefixer-rails 7.2.5
       Using mail 2.7.0
       Using websocket-driver 0.6.5
       Using rb-inotify 0.9.10
       Using activesupport 5.1.4
       Using slim 3.0.9
       Using loofah 2.1.1
       Using sass-listen 4.0.0
       Using rails-dom-testing 2.0.3
       Using globalid 0.4.1
       Using activemodel 5.1.4
       Using jbuilder 2.7.0
       Using rails-html-sanitizer 1.0.3
       Using sass 3.5.5
       Using activerecord 5.1.4
       Using activejob 5.1.4
       Using actionview 5.1.4
       Using actionpack 5.1.4
       Using actioncable 5.1.4
       Using railties 5.1.4
       Using sprockets-rails 3.2.1
       Using actionmailer 5.1.4
       Using responders 2.4.0
       Using sass-rails 5.0.7
       Using slim-rails 3.1.3
       Using webpacker 3.2.1
       Using rails 5.1.4
       Bundle complete! 22 Gemfile dependencies, 59 gems now installed.
       Gems in the groups development and test were not installed.
       Bundled gems are installed into ./vendor/bundle.
       Bundle completed (2.81s)
       Cleaning up the bundler cache.
       Warning: the running version of Bundler (1.15.2) is older than the version that created the lockfile (1.16.1). We suggest you upgrade to the latest version of Bundler by running `gem install bundler`.
       The latest bundler is 1.16.1, but you are currently running 1.15.2.
       To update, run `gem install bundler`
-----> Detecting rake tasks
-----> Preparing app for Rails asset pipeline
       Running: rake assets:precompile
       yarn install v1.4.0
       [1/4] Resolving packages...
       [2/4] Fetching packages...
       info [email protected]: The platform "linux" is incompatible with this module.
       info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
       [3/4] Linking dependencies...
       warning "@rails/webpacker > [email protected]" has unmet peer dependency "caniuse-lite@^1.0.30000697".
       warning " > [email protected]" has unmet peer dependency "css-loader@*".
       warning " > [email protected]" has unmet peer dependency "webpack@^2.2.0 || ^3.0.0".
       warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^1.0.0 || ^2.0.0 || ^3.0.0".
       [4/4] Building fresh packages...
       Done in 21.12s.
       Webpacker is installed 🎉 🍰
       Using /tmp/build_d85ffa3d23df7c297f570fcf78860053/config/webpacker.yml file for setting up webpack paths
       Compiling…
       Compiled all packs in /tmp/build_d85ffa3d23df7c297f570fcf78860053/public/packs
       Asset precompilation completed (44.22s)
       Cleaning assets
       Running: rake assets:clean
-----> Discovering process types
       Procfile declares types     -> hot, web
       Default types for buildpack -> console, rake, worker
-----> Compressing...
       Done: 70.3M
-----> Launching...
       Released v12
       https://tbm-budget.herokuapp.com/ deployed to Heroku

Answer 1

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.