Rails 6.1.1 doesn't load the webpacker created CSS files in production mode

Question

this is my first time asking a question here, I hope I would explain my problem well. In one of my recent tasks, I'm upgrading our app to Ruby and Rails (Ruby 2.6.6 > 2.7.2, Rails 6.0.3.2. > 6.1.1) I had several issues along the way, upgraded some gems and JS libraries. The application runs fine in development mode. However when I switch to production mode, I run these commands to compile and run the server.

RAILS_ENV=production bundle exec rake webpacker:compile
./node_modules/webpack/bin/webpack.js --config webpack.config.js

When I run the app, in production mode it looks running normal, but when I go to localhost:3000 it throws several 500 errors regarding to CSS files. I see the main page of the app as plain HTML, without CSS.

2021-01-22 11:50:51 -0500 Rack app ("GET /assets/stylesheets/app-styles-3661efb317da3fb28f52.css" - (127.0.0.1)): #<NoMethodError: undefined method `match?' for #<ActionDispatch::FileHandler:0x00007ff610502c20>>
2021-01-22 11:50:25 -0500 Rack app ("GET /assets/landing.debug-05588bd014e46c264aaf6e00d2f5c570dd7ca3ed42336c2ff6d5c05bf986afe2.js" - (127.0.0.1)): #<NoMethodError: undefined method `match?' for #<ActionDispatch::FileHandler:0x00007ff610502c20>>
2021-01-22 11:50:25 -0500 Rack app ("GET /assets/companyLogo-6700adf796812269b9428251803c253b9c073095ef511d3619d269a0fdd96435.png" - (127.0.0.1)): #<NoMethodError: undefined method `match?' for #<ActionDispatch::FileHandler:0x00007ff610502c20>>

Files which are mentioned in the error are exists under the /public folder. In the browser's page source, I can see the path as well. When I click the folder path on page source, I see this error on the browser. An unhandled lowlevel error occurred. The application logs may have details.

When I check the docs of RoR, the match? method for ActionDispatch::FileHandler is not there, but in 6.0.3.2 docs, it is deprecated without a notice, maybe.?. It is not something I call intentionally, it is probably called somewhere in Rails when the app is running on production mode.

I have those helper in my erb files.

<%= javascript_pack_tag 'application' %>
<%= stylesheet_pack_tag 'application' %>

I tried replacing them with

<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

but no luck :(

I tried this as well.

Is anyone have an idea how can I make sure Rails is loading these files and accessible in the user side? Or any better debugging suggestions are appreciated! Thanks in advance!

Note: When I switch to development mode, everything works fine. BTW, Some Packages I use:

"@rails/webpacker": "5.2.1" #-> was 4.0.2
"webpack-bundle-analyzer": "3.3.2"
"webpack-manifest-plugin": "3.0.0-rc.0" #-> was 2.0.4
"webpack-cli": "4.4.0", #-> was 3.3.0 and it was only devDependency

Answer 1

We had the same issue with the match? method missing for ActionDispatch::FileHandler

We traced it back to: https://github.com/romanbsd/heroku-deflater/issues/54

Removing the heroku-deflater gem fixed it for us

Answer 2

If you have issues with this and get a error like this:

ActionView::Template::Error (Webpacker can't find application.css in /webapp/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
  "application.js": "/packs/js/application-26b24ac7b08f8a1b640f.js",
  "application.js.map": "/packs/js/application-26b24ac7b08f8a1b640f.js.map",
  "entrypoints": {
    "application": {
      "js": [
        "/packs/js/application-26b24ac7b08f8a1b640f.js"
      ],
      "js.map": [
        "/packs/js/application-26b24ac7b08f8a1b640f.js.map"
      ]
    },
  }
):

You can resolve it by deleting the stylesheet_pack_tag in app/views/layouts/application.html.erb. The javascript_pack_tag directive loads the scss/css. You can see in the error message entrypoints that the scss was not generated, its inside the js. I've self inflicted this error on me because of outdated guides.

Example

With the following files & contents:

app/javascript/packs/application.js

// rails generated stuff
import "styles/application.scss"

app/javascript/styles/application.scss

// some scss rules
body { background-color: red; }

app/views/layouts/application.html.erb:

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>