webpacker: Webpacker in production (Webpacker can't find application in...)

I think I’ve found the culprit: sass I don’t have any “pure css” in my vue file. I use sass/scss.

The sass loader does not extract the css code. Everything seem to be embeded in the js file. So, when I call <%=stylesheet_pack_tag ‘application’%> webpack tries to locate application.css in the manifest.json BUT the .css is absent.

I STRONGLY SUGGEST to add some warning when used in development mode. Something like: WARNING: We are tolerant here in development mode but watch out once your app is deployed.

Solution found (not application.css generated, remove the <%=stylesheet_pack_tag%>). I close this issue.

To address this issue I set

extract_css: true

under production in webpacker.yml

Then, when running rake assets:precompile, make sure to have RAILS_ENV=production. In my case, that led to the css files being created for me during pre-compilation, and the error no longer appeared.

I removed this line <%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %> from application.html.erb and It worked

Best regards

We just discovered this issue as well. We had some packs that didn’t have any css assoicated with them, so there was no file generated.

IMO the problem is that <%=stylesheet_pack_tag 'application'%> blows up if it can’t find a css file for application. I would prefer it either handle missing css files by:

• not outputting anything, or
• output a style tag without the hash and let the browser 404 when looking for it

Ran into this same issue, commenting out <%= stylesheet_pack_tag 'application', turbolink_track: true %> did seem to solve it, but I agree, this should have a warning.

I was experiencing the same issue when running the server in production mode. I finally managed to get it work, and just for the record - I’m not sure if this is the right way to do it, but it works for me. So, here is what I have:

1. Folder structure:

app/javascript:
├── packs:
│   └── application.js
└── stylesheets:
│   └── application.scss
└── images:
    └── all images

1. In app/javascript/packs/application.js

import '../stylesheets/application'
require.context('../images', true)

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

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

1. In config/webpacker.yml extract_css is true for production:

extract_css: true

1. Then I run the following before starting the server in production mode:

RAILS_ENV=production rails assets:precompile

1. After following the steps above it worked a few times, then at one point it stopped working and I started getting the same error again. This time just deleting the contents of the public/packs folder resolved the issue (I had some files from the previous builds). I think that maybe manifest.json wasn’t getting regenerated properly and when I got it deleted from the public/packs folder, it was forced to get regenerated.

I hope this helps!

If the public/packs directory does not exist in your project, then you have to run

     bundle exec rails webpacker:install

You will now see transpiled files as below and you will no longer see the issue.

public
├── packs
   ├── js
   │   ├── application-bbe9c4a129ab949e0636.js
   │   └── application-bbe9c4a129ab949e0636.js.map
   └── manifest.json

Is there any other suggestion other than comments above? I’m still having this issue when I deploy the application. I’ve been trying to figure this out for weeks, and still working on it. Our Rails app was 6.0.3.2 and I’m getting this error after I upgraded to 6.1.1 only in Production Environment. And, In my local env in production mode, if I call RAILS_ENV=production bundle exec rails webpacker:compile and then start the server, there is no problem. However, if I set compile: true in webpacker.yml for production, and let it compile in the first GET request, it doesn’t compile in the same way and throws this error again. Since our app is on heroku, I can’t workaround with webpacker:compile command (I tried adding to deployment commands).

If you still have extract_css as false, it means the CSS is not extracted to a separate file (the JS file will load it asynchronously). Thus stylesheet_pack_tag is not used by Rails (you can remove it and see that it still works). You can try changing it to true and then check if point 2 still works or not.

i have same issue as well,

ActionView::Template::Error (Webpacker can't find src/application in /home/gallery/gallery/releases/20200526160750/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-6cf3a592.css",
  "application.js": "/packs/js/application-36acab8d3b78d3c9970e.js",
  "application.js.map": "/packs/js/application-36acab8d3b78d3c9970e.js.map",
  "entrypoints": {
    "application": {
      "css": [
        "/packs/css/application-6cf3a592.css"
      ],
      "js": [
        "/packs/js/application-36acab8d3b78d3c9970e.js"
      ],
      "js.map": [
        "/packs/js/application-36acab8d3b78d3c9970e.js.map"
      ]
    },
    "navbar": {
      "js": [
        "/packs/js/navbar-9e6a1b1d3aaf831d3a6f.js"
      ],
      "js.map": [
        "/packs/js/navbar-9e6a1b1d3aaf831d3a6f.js.map"
      ]
    }
  },
  "navbar.js": "/packs/js/navbar-9e6a1b1d3aaf831d3a6f.js",
  "navbar.js.map": "/packs/js/navbar-9e6a1b1d3aaf831d3a6f.js.map"
}
):

i already did what people said above but still can’t resolve that in production 😦 i am using capistrano for asset:precompile

it looks that my rails read in the src/application , how i can change to be in application ?

This helps. I’ll be working at it more as I’m still having related issues. I may SO post soon about an issue with Leaflet. ( L.timeline is not a function).

Thank you.

“When you do import ‘…/scss/application.scss’” which is confusing based on the discussion in this thread.

As it states in https://github.com/rails/webpacker#usage you must import your styles in one of your webpack entry files under /packs. As long as you don’t put the scss or css in /packs, you can probably import it from anywhere.

A beginner’s guide to best practices and when to deviate.

I agree that the readme could be better structured.

---

The things @xuanchien mentioned in this thread aren’t in the docs. Where would I find that information, for example?

Lets take a look. First off, xuanchien is right about extract_css. You can read about that from the file I linked.

And in application.scss I have (among others) … // adding .scss may not have helped it load

Where is application.scss located? Is it imported via JS anywhere?

A folder named css under app/javascript will break this for sure.

If true, this is a bug. Something like this should work:

// Folder structure
// app/javascript:
// ├── packs:               👈 only webpack entry files here!
// │   └── application.js   👈 this file is below
// └── css:
// │   └── site.css
// └── images:
// └── logo.svg

// this file is application.js
// These should all work (only pick one)
import '../css/site';
import '../css/site.css';
import './../css/site.css';
import 'app/javascript/css/site.css';

…You don’t reference a CSS file from your JS pack file. It must be CSS, not SCSS or others. If I have the following line in my pack import('stylesheets/site')

You don’t need to use the extension if the file is unambiguous. Look in your webpacker.yml for the order these resolve in. Here is the default: https://github.com/rails/webpacker/blob/master/lib/install/config/webpacker.yml#L36

seems to violate basic Rails structure: having scss under a folder named javascript.

This is because Rails is letting the javascript compile the scss instead of the asset pipeline.

Hopefully this quick, meandering post helps illuminate things.

I followed one of the blogs…I looked at several posting and lots of contradictions.

The official docs should be up to date. If you find contradictions, please open an issue with details.

You can find more info on stylesheets with Webpacker over here: https://github.com/rails/webpacker/blob/master/docs/css.md#css-sass-and-scss