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]

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


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

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