Cannot Deploy Rails App with Webpacker on Heroku - ruby-on-rails

Question

I have upgraded a Rails 5 app to Rails 6 and also migrated all JS files from the assets pipeline to Webpacker. In development everything works fine. However, when I push the code to production I get an error when I attempt a page load.
I am using heroku for production. The build process successfully completes.
Here is my error:
ActionView::Template::Error (Webpacker can't find application in /app/public/packs/manifest.json.
Possible causes:
2019-10-24T07:23:04.376725+00:00 app[web.2]: 1. You want to set webpacker.yml value of compile to true for your environment
2019-10-24T07:23:04.376728+00:00 app[web.2]: unless you are using the `webpack -w` or the webpack-dev-server.
2019-10-24T07:23:04.376730+00:00 app[web.2]: 2. webpack has not yet re-run to reflect updates.
2019-10-24T07:23:04.376732+00:00 app[web.2]: 3. You have misconfigured Webpacker's config/webpacker.yml file.
2019-10-24T07:23:04.376734+00:00 app[web.2]: 4. Your webpack configuration is not creating a manifest.
2019-10-24T07:23:04.376736+00:00 app[web.2]: Your manifest contains:
2019-10-24T07:23:04.376739+00:00 app[web.2]: {
2019-10-24T07:23:04.376741+00:00 app[web.2]: }
2019-10-24T07:23:04.376742+00:00 app[web.2]: ):
Here is my package.json file
{
"name": "manager",
"private": true,
"dependencies": {
"#rails/activestorage": "^6.0.0",
"#rails/ujs": "^6.0.0",
"#rails/webpacker": "^4.0.7",
"bootstrap": "^4.3.1",
"fullcalendar": "^3.10.1",
"jquery": "^3.4.1",
"jquery-ui": "^1.12.1",
"latest-version": "^5.1.0",
"moment": "^2.24.0",
"popper.js": "^1.16.0",
"qtip2": "^3.0.3",
"scheduler": "^0.16.2",
"tempusdominus-bootstrap-4": "^5.1.2"
},
"devDependencies": {
"webpack-dev-server": "^3.8.2"
}
}
I'm completely lost. I've tried recompiling assets, changing webpacker compile to true for production. I've also tried running yarn install --check-files but everything runs successfully. I have also tried completely reinstalling webpacker with the following command: bundle exec rake webpacker:install then pushing the updated code to production but I still get the same error.
Here are my heroku build logs
Delta compression using up to 2 threads.
Compressing objects: 100% (7/7), done.
Writing objects: 100% (7/7), 1.01 KiB | 1.01 MiB/s, done.
Total 7 (delta 6), 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: NODE_ENV=production
remote: NODE_MODULES_CACHE=true
remote: NODE_VERBOSE=false
remote:
remote: -----> Installing binaries
remote: engines.node (package.json): unspecified
remote: engines.npm (package.json): unspecified (use default)
remote: engines.yarn (package.json): unspecified (use default)
remote:
remote: Resolving node version 10.x...
remote: Downloading and installing node 10.17.0...
remote: Using default npm version: 6.11.3
remote: Resolving yarn version 1.x...
remote: Downloading and installing yarn (1.19.1)...
remote: Installed yarn 1.19.1
remote:
remote: -----> Restoring cache
remote: - node_modules
remote:
remote: -----> Installing dependencies
remote: Installing node modules (yarn.lock)
remote: yarn install v1.19.1
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: info fsevents#1.2.9: The platform "linux" is incompatible with this module.
remote: info "fsevents#1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: warning " > tempusdominus-bootstrap-4#5.1.2" has unmet peer dependency "moment-timezone#^0.5.11".
remote: warning " > tempusdominus-bootstrap-4#5.1.2" has unmet peer dependency "tempusdominus-core#5.0.3".
remote: warning " > webpack-dev-server#3.9.0" has unmet peer dependency "webpack#^4.0.0".
remote: warning "webpack-dev-server > webpack-dev-middleware#3.7.2" has unmet peer dependency "webpack#^4.0.0".
remote: [4/4] Building fresh packages...
remote: Done in 27.57s.
remote:
remote: -----> Build
remote:
remote: -----> Pruning devDependencies
remote: yarn install v1.19.1
remote: [1/4] Resolving packages...
remote: [2/4] Fetching packages...
remote: info fsevents#1.2.9: The platform "linux" is incompatible with this module.
remote: info "fsevents#1.2.9" is an optional dependency and failed compatibility check. Excluding it from installation.
remote: [3/4] Linking dependencies...
remote: warning " > tempusdominus-bootstrap-4#5.1.2" has unmet peer
dependency "moment-timezone#^0.5.11".
remote: warning " > tempusdominus-bootstrap-4#5.1.2" has unmet peer
dependency "tempusdominus-core#5.0.3".
remote: warning " > webpack-dev-server#3.9.0" has unmet peer
dependency "webpack#^4.0.0".
remote: warning "webpack-dev-server > webpack-dev-middleware#3.7.2"
has unmet peer dependency "webpack#^4.0.0".
remote: [4/4] Building fresh packages...
remote: warning Ignored scripts due to flag.
remote: Done in 5.14s.
remote:
remote: -----> Caching build
remote: - node_modules
remote:
remote: -----> Build succeeded!
remote: ! This app may not specify any way to start a node process
remote: https://devcenter.heroku.com/articles/nodejs-support#default-
web-process-type
remote:
remote: ! Unmet dependencies don't fail yarn install but may cause
runtime issues
remote: https://github.com/npm/npm/issues/7494
remote:
remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.5.3
remote: -----> Installing dependencies using bundler 1.17.3
remote: Running: bundle install --without development:test --path
vendor/bundle --binstubs vendor/bundle/bin -j4 --deployment
remote: The dependency tzinfo-data (>= 0) will be unused by any of
the platforms Bundler is installing for. Bundler is installing for ruby but
the dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To
add those platforms to the bundle, run 'bundle lock --add-platform x86-
mingw32 x86-mswin32 x64-mingw32 java'.
remote: Using rake 13.0.0
remote: Using concurrent-ruby 1.1.5
remote: Using i18n 1.7.0
remote: Using minitest 5.12.2
remote: Using thread_safe 0.3.6
remote: Using tzinfo 1.2.5
remote: Using zeitwerk 2.2.0
remote: Using activesupport 6.0.0
remote: Using builder 3.2.3
remote: Using erubi 1.9.0
remote: Using mini_portile2 2.4.0
remote: Using nokogiri 1.10.4
remote: Using rails-dom-testing 2.0.3
remote: Using crass 1.0.4
remote: Using loofah 2.3.0
remote: Using rails-html-sanitizer 1.3.0
remote: Using actionview 6.0.0
remote: Using rack 2.0.7
remote: Using rack-test 1.1.0
remote: Using actionpack 6.0.0
remote: Using nio4r 2.5.2
remote: Using websocket-extensions 0.1.4
remote: Using websocket-driver 0.7.1
remote: Using actioncable 6.0.0
remote: Using globalid 0.4.2
remote: Using activejob 6.0.0
remote: Using activemodel 6.0.0
remote: Using activerecord 6.0.0
remote: Using mimemagic 0.3.3
remote: Using marcel 0.3.3
remote: Using activestorage 6.0.0
remote: Using mini_mime 1.0.2
remote: Using mail 2.7.1
remote: Using actionmailbox 6.0.0
remote: Using actionmailer 6.0.0
remote: Using actiontext 6.0.0
remote: Using public_suffix 4.0.1
remote: Using addressable 2.7.0
remote: Using encryptor 3.0.0
remote: Using attr_encrypted 3.1.0
remote: Using execjs 2.7.0
remote: Using autoprefixer-rails 9.6.4
remote: Using aws-eventstream 1.0.3
remote: Using aws-partitions 1.222.0
remote: Using aws-sigv4 1.1.0
remote: Using jmespath 1.4.0
remote: Using aws-sdk-core 3.68.1
remote: Using aws-sdk-polly 1.26.0
remote: Using bcrypt 3.1.13
remote: Using msgpack 1.3.1
remote: Using bootsnap 1.4.5
remote: Using popper_js 1.14.5
remote: Using rb-fsevent 0.10.3
remote: Using ffi 1.11.1
remote: Using rb-inotify 0.10.0
remote: Using sass-listen 4.0.0
remote: Using sass 3.7.4
remote: Using bootstrap 4.0.0
remote: Using method_source 0.9.2
remote: Using thor 0.20.3
remote: Using railties 6.0.0
remote: Using jquery-rails 4.3.5
remote: Using momentjs-rails 2.20.1
remote: Using moment-timezone-rails 1.0.0
remote: Using bootstrap4-datetime-picker-rails 0.3.1
remote: Using bundler 1.17.3
remote: Using mini_magick 4.9.5
remote: Using ruby-vips 2.0.15
remote: Using image_processing 1.9.3
remote: Using carrierwave 2.0.2
remote: Using coffee-script-source 1.12.2
remote: Using coffee-script 2.4.1
remote: Using coffee-rails 5.0.0
remote: Using orm_adapter 0.5.0
remote: Using responders 3.0.0
remote: Using warden 1.2.8
remote: Using devise 4.7.1
remote: Using multi_json 1.13.1
remote: Using elasticsearch-api 7.3.0
remote: Using multipart-post 2.1.1
remote: Using faraday 0.17.0
remote: Using elasticsearch-transport 7.3.0
remote: Using elasticsearch 7.3.0
remote: Using hashie 3.6.0
remote: Using elasticsearch-model 7.0.0
remote: Using elasticsearch-rails 7.0.0
remote: Using excon 0.67.0
remote: Using formatador 0.2.5
remote: Using mime-types-data 3.2019.1009
remote: Using mime-types 3.3
remote: Using fog-core 2.1.2
remote: Using fog-json 1.2.0
remote: Using fog-xml 0.1.3
remote: Using ipaddress 0.8.3
remote: Using fog-aws 3.5.2
remote: Using jquery-ui-rails 6.0.1
remote: Using fullcalendar-rails 3.9.0.0
remote: Using hkdf 0.3.0
remote: Using jbuilder 2.9.1
remote: Using jwt 2.2.1
remote: Using kaminari-core 1.1.1
remote: Using kaminari-actionview 1.1.1
remote: Using kaminari-activerecord 1.1.1
remote: Using kaminari 1.1.1
remote: Using libv8 7.3.492.27.1 (x86_64-linux)
remote: Using mini_racer 0.2.6
remote: Using multi_xml 0.6.0
remote: Using oauth 0.4.7
remote: Using oauth2 1.4.2
remote: Using pg 1.1.4
remote: Using pr_geohash 1.0.0
remote: Using puma 4.2.1
remote: Using roxml 4.0.0
remote: Using quickbooks-ruby 1.0.0
remote: Using rack-proxy 0.6.5
remote: Using sprockets 4.0.0
remote: Using sprockets-rails 3.2.1
remote: Using rails 6.0.0
remote: Using rsolr 2.2.1
remote: Using ruby_http_client 3.3.0
remote: Using sassc 2.2.1
remote: Using tilt 2.0.10
remote: Using sassc-rails 2.1.2
remote: Using sass-rails 6.0.0
remote: Using sendgrid-ruby 6.0.0
remote: Using stripe 5.7.0
remote: Using sunspot 2.5.0
remote: Using sunspot_rails 2.5.0
remote: Using sunspot_solr 2.5.0
remote: Using twilio-ruby 5.27.1
remote: Using uglifier 4.2.0
remote: Using webpacker 4.0.7
remote: Using webpush 1.0.0
remote: Using wicked_pdf 1.4.0
remote: Using wkhtmltopdf-binary 0.12.4
remote: Bundle complete! 42 Gemfile dependencies, 135 gems now installed.
remote: Gems in the groups development and test were not installed.
remote: Bundled gems are installed into './vendor/bundle'
remote: Bundle completed (0.54s)
remote: Cleaning up the bundler cache.
remote: The dependency tzinfo-data (>= 0) will be unused by any of
the platforms Bundler is installing for. Bundler is installing for ruby but
the
dependency is only for x86-mingw32, x86-mswin32, x64-mingw32, java. To add
those platforms to the bundle, run 'bundle lock --add-platform x86-mingw32
x86-mswin32 x64-mingw32 java'.
remote: Detected manifest file, assuming assets were compiled locally
remote: -----> Detecting rails configuration
remote: -----> Detecting rake tasks
remote:
remote: ###### WARNING:
remote:
remote: Detecting rails configuration failed
remote: set HEROKU_DEBUG_RAILS_RUNNER=1 to debug
remote:
remote:
remote: ###### WARNING:
remote:
remote: We detected that some binary dependencies required to
remote: use all the preview features of Active Storage are not
remote: present on this system.
remote:
remote: For more information please see:
remote: https://devcenter.heroku.com/articles/active-storage-on-
heroku
remote:
remote:
remote:
remote: ###### WARNING:
remote:
remote: There is a more recent Ruby version available for you to use:
remote:
remote: 2.5.7
remote:
remote: The latest version will include security and bug fixes, we always recommend
remote: running the latest version of your minor release.
remote:
remote: Please upgrade your Ruby version.
remote:
remote: For all available Ruby versions see:
remote: https://devcenter.heroku.com/articles/ruby-support#supported-runtimes
remote:
remote:
remote: ###### WARNING:
remote:
remote: No Procfile detected, using the default web server.
remote: We recommend explicitly declaring how to boot your server process via a Procfile.
remote: https://devcenter.heroku.com/articles/ruby-default-web-server
remote:
remote:
remote:
remote: -----> Discovering process types
remote: Procfile declares types -> (none)
remote: Default types for buildpack -> console, rake, web
remote:
remote: -----> Compressing...
remote: Done: 218M
remote: -----> Launching...
remote: Released v573
remote: https://enigmatic-temple-38800.herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.`
My best guess is that suggestion #4 is the problem Your webpack configuration is not creating a manifest. since the manifest shows as blank from the log but I am not sure how to troubleshoot this or fix it for that matter.
UPDATE
Please note that I am still using the Rails asset pipeline to serve css and images.
webpacker.yml (all default settings)
# Note: You must restart bin/webpack-dev-server for changes to take effect
default: &default
source_path: app/javascript
source_entry_path: packs
public_root_path: public
public_output_path: packs
cache_path: tmp/cache/webpacker
check_yarn_integrity: false
webpack_compile_output: false
# Additional paths webpack should lookup modules
# ['app/assets', 'engine/foo/app/assets']
resolved_paths: []
# Reload manifest.json on all requests so we reload latest compiled packs
cache_manifest: false
# Extract and emit a css file
extract_css: false
static_assets_extensions:
- .jpg
- .jpeg
- .png
- .gif
- .tiff
- .ico
- .svg
- .eot
- .otf
- .ttf
- .woff
- .woff2
extensions:
- .mjs
- .js
- .sass
- .scss
- .css
- .module.sass
- .module.scss
- .module.css
- .png
- .svg
- .gif
- .jpeg
- .jpg
development:
<<: *default
compile: true
# Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
check_yarn_integrity: true
# Reference: https://webpack.js.org/configuration/dev-server/
dev_server:
https: false
host: localhost
port: 3035
public: localhost:3035
hmr: false
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
'Access-Control-Allow-Origin': '*'
watch_options:
ignored: '**/node_modules/**'
test:
<<: *default
compile: true
# Compile test packs to a separate directory
public_output_path: packs-test
production:
<<: *default
# Production depends on precompilation of packs prior to booting for
performance.
compile: false
# Extract and emit a css file
extract_css: true
# Cache manifest.json for performance
cache_manifest: true

Answer 1

The problem is this log message Detected manifest file, assuming assets were compiled locally
The problem is probably that you ran assets:precompile locally and then committed public/assets directory.
Run git rm -rf public/assets add the directory to .gitignore commit and push to heroku. Should work now.

Answer 2

Your issue looks similar to issue #2071. In your webpacker.yml, under production add
extract_css: true