Webpacker Deployment Issue Rails 6

user_13610001 0
Viewed 695

Here is the error code:

ActionView::Template::Error (Webpacker can't find stylesheets in /app/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.css": "/packs/css/application-77c6d56c.css",
     "application.js": "/packs/js/application-202b434086ff6248f760.js",
     "application.js.map": "/packs/js/application-202b434086ff6248f760.js.map",
     "entrypoints": {
     "application": {
     "css": [ "/packs/css/application-77c6d56c.css" ],
     "js": [ "/packs/js/application-202b434086ff6248f760.js" ],
     "js.map": [ "/packs/js/application-202b434086ff6248f760.js.map" ]

And the offending code is:

7:     <%= stylesheet_link_tag "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" %>
8:     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
9:     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
10:     <%= stylesheet_pack_tag 'stylesheets', media: 'all', 'data-turbolinks-track': 'reload' %>
11:     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12:     <link rel="stylesheet" href="https://unpkg.com/tailwindcss/dist/tailwind.min.css">

I realize that I have unnecessary link_tag(s), but I put them there just to make sure everything went through correctly. All of this works flawlessly in development but, once deployed to Heroku, it just crashes here so nothing is working right now.

I tried adding some @import(s) to connect all the css/js files to no avail. I'm not sure what the issue is at this point.

Using Rails 6, Webpacker, TailwindCSS, no real JS in usage so deleting all the script stuff wouldn't be a real issue, I just left it because this is a project still in development and will include JS at some point.

ruby-on-rails-6 blogs heroku ruby-on-rails ruby
1 Answers

I had this same problem and noticed several templates/tutorials for adding Tailwind CSS to Rails specify adding to application.html.erb:

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

while others specify:

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

Not a webpack expert, but doing some reading convinced me that the name in the stylesheet_pack_tag helper is what webpack will look to bundle (from your \app\javascript\packs folder) but then is also the stylesheet name bundled by webpack (from your \public\packs\css folder) that your layout is looking for. It's really confusing, but I guess this is the convention over configuration thing. It also jives with the error being thrown above. If you rename your tag so it's application it should solve your error (at least it seemed to work for me). Maybe the stylesheets name is relevant for an older rails version?

user_136442170
Related