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

Question

I'm having an issue with webpacker on my rails app. Seems to be missing a application.css from the manifest.json file in /app/public/packs/manifest.json.

I think my manifest.json is not accurate and i dont know how to have rails generate new one

In my view code

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

Error

app_1       | ActionView::Template::Error (Webpacker can't find application.css in /app/public/packs/manifest.json. Possible causes:
app_1       | 1. You want to set webpacker.yml value of compile to true for your environment
app_1       |    unless you are using the `webpack -w` or the webpack-dev-server.
app_1       | 2. webpack has not yet re-run to reflect updates.
app_1       | 3. You have misconfigured Webpacker's config/webpacker.yml file.
app_1       | 4. Your webpack configuration is not creating a manifest.
app_1       | Your manifest contains:
app_1       | {
app_1       |   "application.js": "/packs/js/application-c09a7a4ae38ea14ff8e2.js",
app_1       |   "application.js.map": "/packs/js/application-c09a7a4ae38ea14ff8e2.js.map",
app_1       |   "entrypoints": {
app_1       |     "application": {
app_1       |       "js": [
app_1       |         "/packs/js/application-c09a7a4ae38ea14ff8e2.js"
app_1       |       ],
app_1       |       "js.map": [
app_1       |         "/packs/js/application-c09a7a4ae38ea14ff8e2.js.map"
app_1       |       ]
app_1       |     }
app_1       |   },
app_1       |   "media/fonts/bold-affa96571d-v2.woff": "/packs/media/fonts/bold-affa96571d-v2-b092ddd6.woff",
app_1       |   "media/fonts/bold-b542beb274-v2.woff2": "/packs/media/fonts/bold-b542beb274-v2-616e5f21.woff2",
app_1       |   "media/fonts/light-94a07e06a1-v2.woff2": "/packs/media/fonts/light-94a07e06a1-v2-bb962e0c.woff2",
app_1       |   "media/fonts/light-f591b13f7d-v2.woff": "/packs/media/fonts/light-f591b13f7d-v2-f03d82c2.woff",
app_1       |   "media/images/favicon.ico": "/packs/media/images/favicon-b5bada83.ico",

contents of my app

wintersolutions · Answer 1 · 2021-01-24T13:07:42.487

My Rails 6.1.1 app threw this error in the production environment:

ActionView::Template::Error (Webpacker can't find bootstrap.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"
      ]
    },
  }
):

Setup

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:

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

Solution

Deleting the stylesheet_pack_tag in app/views/layouts/application.html.erb completely worked. The javascript_pack_tag directive loads the scss/css.

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

Now it just says "Webpacker can't find application.js" but the `application.js` is there in my assets — Dorian, Apr 18 '21 at 05:35

score 4 · Answer 2 · answered May 15 '21 at 17:54

My production config in main layout application.html.erb, it can save you in production before my explanation

    <%= stylesheet_packs_with_chunks_tag 'application', media: 'all' %>
    <%= javascript_packs_with_chunks_tag 'application', 'important_entry_if_existed' %>

Assumption

So, let me assume that you are now deploying your application to production in the first place, previously

you've added UI libs such as antd, material ui, ...
you had something.css imported to an entry, application.js for instance
you've optimized webpacker, in environment.js with environment.splitChunks()
you are confident because everything have been working well in the long running develop environment

Your codebase skeleton was like this, as you were reading the official webpacker guide before

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

But what you get is Webpacker can't find application.css in /app/public/packs/manifest.json

What we called entrypoints

Here

It is important to note that only webpack entry files should be placed in the app/javascript/packs directory; Webpack will create a separate dependency graph for each entrypoint, so a large number of packs will increase compilation overhead. The rest of your asset source code should live outside this directory though Webpacker does not place any restrictions or make any suggestions on how to structure your source code

So for the above skeleton, there are two entrypoints, the first is application.js, the second is application.css. The calling or replacing stylesheet_link_tag by stylesheet_pack_tag make us feel completed as all entry points are included as webpack is handling them

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

On development, it runs obviously. However on production, it makes application.css missing. Likely, when you check your pack/manifest.json you will see some weird files default~app~application. The answer, in short is default webpacker.yml config for extract_css: false for production.

What we should know well are the main entry-point and critical css

IMHO, entrypoint can load css, scss, etc but doing that causes a naming conflict of extracted css vs entry-point. If there are import or css definitions inside application.js then the conflict in naming will create the weird files default~app~application. The files can not work with compiled source because we are not calling stylesheet_pack_tag for them. It is an unwanted behavior.

So this should be the right way

app/javascript:
  ├── packs:
  │   # only webpack entry files here
  │   └── application.js
  └── src:
  │   └── my_component.js
  └── stylesheets:
  │   └── critical.scss # <-- rename from application.css
  │   └── my_styles.css
  └── images:
      └── logo.svg

// critical.css

@import 'my_styles'

// application.js

import '../stylesheets/critical'

Then we have application.js as the main entrypoint, application.css extracted must includes critical.scss to be recognized. Then

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

is perhaps magic but not confusing at all. Moreoever, the critical.scss can be helpful in loading async/defer CSS to prevent FOUC but it is not the concern.

splitChunk causes css loaded partially

With splitChunk optimization, webpack/webpacker can still extract css to vendor/runtime files even extract_css: false in production. So I suggest replacing x_pack_tag by _xpack_with_chunks_tag anyway.

Good luck!

score 3 · Answer 3 · answered Mar 17 '22 at 09:05

in my case, I am using morden version of Rails ( Rails 7 ) and I have to start 2 comand to make rails run normally:

bundle exec rails s -p 3000           # port 3000
bundle exec bin/webpack-dev-server    # port 3030

Long answer:

1.make sure you correctly installed webpack stuff:

npm install -g yarn
yarn install
bundle exec rails webpacker:install

2.make sure you have a webpacker config file:

default: &default
  source_path: app/javascript
  source_entry_path: /
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/webpacker
  webpack_compile_output: true

  # Additional paths webpack should look up modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: ["lib/assets/javascripts"]

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

development:
  <<: *default
  compile: true

  dev_server:
    https: false
    host: localhost
    port: 3035
  ... 
  <<: *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

  # Cache manifest.json for performance
  cache_manifest: true

3.start webpack server so that rails know how to server the js/css:


bundle exec bin/webpack-dev-server

4.start your rails server as ten years ago:

bundle exec rails server

score -2 · Answer 4 · answered Jun 16 '21 at 09:46

If you have settings properly in place for webpacker and you still face the issue. This might be due to killing and restarting the server on different pages other than localhost:3000.

If we visit localhost:3000 on restarting the server. It's working fine.