Webpacker 4.2 can't find application in /app/public/packs/manifest.json heroku

Question

I\'m a bit stumped. My local rails app works great with webpacker 4.2 and react, but when deploying to production gives me the wonderful can\'t find application in /ap

Answer 1

If you are using Rails 6+ with webpacker then due to the latest rails 6 update the both javascript and css files are moved under app/javascript instead of app/assets.

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── application.css
  └── images:
      └── logo.svg

But if you have upgraded from older version to new version but still want to compile CSS from app/assets/stylesheets folder then follow the below tweaks:

1. update the below in config/webpacker.yml for webpack to include app/assets in the resolved path.

// config/webpacker.yml

resolved_paths: ['app/assets']

2. copy below line to app/javascript/packs/application.js.

// app/javascript/packs/application.js

import 'stylesheets/application'

This should fix your CSS compilation issue when you run bin/webpack-dev-server.

Answer 2

It looks like there's no application.css in your manifest.json which means you might not be importing any css from within your Webpack javascript files.

If that's all true, then you can fix the error in production by one of the following:

• Quick (temporary) fix: Add extract_css: false to your production block in config/webpacker.yml (which would mimic your local environments)
• If you don't want to compile css with Webpacker: Remove <%= stylesheet_pack_tag 'application' %> from your application layout
• If you want to compile some css with Webpacker: Import at least one css file from your Webpack javascript