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

[ycrepeau]

This is a reccurent issue. I have spent about 10 days trying to figure out. In last and desperate measure, I have tried to create a new fresh project with "Rails new test-vue4 webpacker=vue".

1. Precompiled assets (and by extension webpack stuff)
2. Started the server in production mode.

As usual, I have:

````
F, [2019-04-28T16:05:34.858805 #23809] FATAL -- : [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] ActionView::Template::Error (Webpacker can't find application in /Users/ycrepeau/Document/Developpement/test-vue4/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-9171bbec65575b6edf4f.js",
   "application.js.map": "/packs/js/application-9171bbec65575b6edf4f.js.map",
   "entrypoints": {
   "application": {
   "js": [
   "/packs/js/application-9171bbec65575b6edf4f.js"
   ],
   "js.map": [
   "/packs/js/application-9171bbec65575b6edf4f.js.map"
   ]
   },
   "hello_vue": {
   "css": [
   "/packs/css/hello_vue-da095892.css"
   ],
   "js": [
   "/packs/js/hello_vue-5cee8bc0b69a0e8ff7f4.js"
   ],
   "js.map": [
   "/packs/js/hello_vue-5cee8bc0b69a0e8ff7f4.js.map"
   ]
   }
   },
   "hello_vue.css": "/packs/css/hello_vue-da095892.css",
   "hello_vue.js": "/packs/js/hello_vue-5cee8bc0b69a0e8ff7f4.js",
   "hello_vue.js.map": "/packs/js/hello_vue-5cee8bc0b69a0e8ff7f4.js.map"
   }
   ):
   F, [2019-04-28T16:05:34.858946 #23809] FATAL -- : [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 8: %title= content_for?(:title) ? yield(:title) : "Untitled"
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 9:
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 10: = javascript_pack_tag 'application'
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 11: = stylesheet_pack_tag 'application'
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 12: = stylesheet_link_tag "application"
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 13: = javascript_include_tag "application", "data-turbolinks-track" => true
   [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] 14: = csrf_meta_tag
   F, [2019-04-28T16:05:34.858984 #23809] FATAL -- : [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c]
   F, [2019-04-28T16:05:34.859059 #23809] FATAL -- : [92e6eb8c-8b5f-40cd-9fac-4ab36c32025c] app/views/layouts/application.html.haml:11:
   ````

As you can see, the manifest.json is there. The related js and css files are there too.

What puzzles me is the line:

(Webpacker can't find application in /Users/ycrepeau/Document/Developpement/test-vue4/public/packs/manifest.json.
when the manifest.json is present at that path.

The expected behaviour is simply to have a message typed in the console. By default (out of the box), app/javascript/packs/application.js is a very simple "hello world" example.

The <% =javascript_pack_tag 'application'%> seems to be blind in production mode, unable to "see" the manifest.json file which is obviously present.

I use node 10.15.3 and ruby 2.6.3. Webpacker: 4.0.2

The package.json:

````
{
"name": "test-vue4",
"private": true,
"dependencies": {
"@rails/webpacker": "^4.0.2",
"vue": "^2.6.10",
"vue-loader": "^15.7.0",
"vue-template-compiler": "^2.6.10"
},
"devDependencies": {
"webpack-dev-server": "^3.3.1"
}
}

````

No issue in development mode or test mode.

[ycrepeau]

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.

[andhart]

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.

[ncphillips]

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

[jakeNiemiec]

https://github.com/rails/webpacker/issues/2096 could be related to this.

[ycrepeau]

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

[mstate]

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.

[JacksonBates]

@ycrepeau you are my hero.

I've been trying to fix this prod bug for far too many days now, and it was the errant stylesheet pack tag causing the problem.

I spent so much time assuming the JS wasn't compiling properly it didn't occur to me that CSS was the issue.

[Siva-Ganesh-VR]

This may help anyone in future

https://stackoverflow.com/questions/58506351/webpacker-throws-application-css-not-found-in-manifest-json-in-rails-6-applica

[jhuarancca]

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

Best regards

[xuanchien]

This issue drove me crazy. It turns out the issue was because I created a folder called css under app/javascript. I renamed that folder into stylesheets and it now works as I expected. Took me a few days to think and figure this out

[MtnBiker]

@xuanchien. Your suggestion worked for me. But I can't be absolutely sure that did it. I was fiddling with other webpacker settings. But I'll leave well enough alone.

[xuanchien]

@MtnBiker I have learned a few things that can cause this issue:

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


1. 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')

Then my referenced CSS file must be site.css, it cannot be site.scss

1. Forgot to change the extract_css option to true in webpacker.yml

[MtnBiker]

@xuanchien. This is such a mess in Rails. stylesheets under javascript, etc; but it's what we have.

1. I followed one of the blogs and css was more familiar to me as a folder, but stylesheets it is.

2. Are you saying nothing named .scss will be used? I have ignored the styling trying to work on other aspects of what I'm doing. I just tested some of this. In packs/application.js I have the line import '../stylesheets/application' and it works for application.scss.

And in application.scss I have (among others
@import 'bootstrap_custom'; // adding .scss may not have helped it load @import "~bootstrap/scss/bootstrap.scss";
and it works. I confirmed by commenting out and my styling disappeared.

1. I still have false. What does changing to true do?

[xuanchien]

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.

[MtnBiker]

Got it. Thanks for the info. Will have to work through stylesheets with Webpacker again. Maybe someone will post again on how to do it right and was is the best/acceptable way with Rails. I looked at several posting and lots of contradictions.

[jakeNiemiec]

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

[MtnBiker]

Thanks for the link. I did not see it because it was at the bottom of the page. Maybe the second paragraph of the ReadMe should mention what's not covered in the ReadMe and to see below for what's else is available. https://guides.rubyonrails.org/asset_pipeline.html has no mention of Webpacker. The first example on the css-sass-and-scss page is "When you do import '../scss/application.scss'" which is confusing based on the discussion in this thread. What's missing for me is something like a Rails Guides discussion on how to structure and what needs to be imported. A beginner's guide to best practices and when to deviate. As I said earlier webpacker seems to violate basic Rails structure: having scss under a folder named javascript. The things @xuanchien mentioned in this thread aren't in the docs. Where would I find that information, for example?

Thanks for your patience.

[jakeNiemiec]

"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.

[MtnBiker]

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.

[dennyf]

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!

[imechemi]

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.

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

[bbugh]

FYI you don't have to do the "import css in javascript" thing since Webpacker 5.0 introduced multiple pack entry points with the same name. The documentation for this does not seem to have been updated yet.

Instead of import '../your_styles/application.scss in your application.js file, you can just make a packs/application.scss file and webpacker will correctly handle it.

[ibantoo]

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 ?