Webpacker in production (Webpacker can't find application in...) #2071
Comments
|
I think I've found the culprit: sass 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. |
|
Ran into this same issue, commenting out |
|
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
|
|
#2096 could be related to this. |
|
Solution found (not application.css generated, remove the <%=stylesheet_pack_tag%>). I close this issue. |
|
To address this issue I set
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. |
|
@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. |
|
This may help anyone in future |
|
I removed this line Best regards |
|
This issue drove me crazy. It turns out the issue was because I created a folder called |
|
@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. |
|
@MtnBiker I have learned a few things that can cause this issue:
Then my referenced CSS file must be
|
|
@xuanchien. This is such a mess in Rails. stylesheets under javascript, etc; but it's what we have.
And in application.scss I have (among others and it works. I confirmed by commenting out and my styling disappeared.
|
|
If you still have |
|
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. |
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 |
|
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. |
As it states in https://github.com/rails/webpacker#usage you must import your styles in one of your webpack entry files under
I agree that the readme could be better structured.
Lets take a look. First off, xuanchien is right about extract_css. You can read about that from the file I linked.
Where is
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 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
This is because Rails is letting the javascript compile the scss instead of the asset pipeline. Hopefully this quick, meandering post helps illuminate things. |
|
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. |
|
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:
I hope this helps! |
ActionView::Template::Error (Webpacker can't find search_page in /home/rails/contra/public/packs/manifest.json ... rails/webpacker#2071 looks like the solution
|
If the You will now see transpiled files as below and you will no longer see the issue. |
|
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 |
|
i have same issue as well, i already did what people said above but still can't resolve that in production :( it looks that my rails read in the |
Tried solving it through the below solutions but of no avail thus far: - https://stackoverflow.com/a/59162932/272398 - https://stackoverflow.com/a/58507538/272398 - rails/webpacker#2071 - https://stackoverflow.com/a/62239847/272398 As mentioned here: https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/, webpacker can be used to compile javascript code but in order to include in our apps we use the javascript_pack_tag. It feels ok to remove javascript_pack_tag for now as for the current scope of the given problem statement javascript_pack_tag is not something we need to make use of anytime soon. I've also posted a question here: https://stackoverflow.com/questions/59161189/webpacker-4-2-cant-find-application-in-app-public-packs-manifest-json-heroku/59162932#comment113793109_59162932 to follow up on this later.
Making change based solely on: rails/webpacker#2071 (comment)
|
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 |
|
I have a working example running: To run the the Ror server: docker run -p 3000:3000 ycrepeau/rails611:v1 I have another project and I wanted to move from Ruby 2.6.2 to Ruby 2.7.2. Since I was using ruby-alpine image, changing the ruby version also changed the Node version (10 to 12). And the "big fun" started there. I have to look for every node_module correct version compatible with my setup. Once I have found the right versions for both the Gemfile and Package.json, everything worked fine. So, to look the project, git clone the project and use docker build to watch every step involved. //TODO: Write the .gtlab-ci.yml to use Gitlab CI/CD and deploy the project to Heroku. |
|
One important issue: With Rails 6.1.1, check file: /config/environment/production.js, around line 25. config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? should be replaced by |
|
I haven't fully solved the issue yet, but one thing I found is As a result, your Rails app may attempt to render a page without incomplete front-end build, and the CSS portion might be missing. To make matters even more deceptive, you might get something like This makes it seem like there's no problem with the webpacker compilation result. However, in reality, it might have just cached the webpacker compilation result from previous run with webpack errors! In order to see true webpack compilation error messages, you might want to do Make sure to check |
|
For future googlers: you are probably importing a pack that doesn't have any CSS imported inside it, and stylesheet_pack_tag or stylesheet_packs_with_chunks_tag will raise an exception in production because in that environment Like I wrote in #3022, the problem is:
I solved my issue by creating a service object that reads manifest.json (in real time in development to avoid server restarts, but totally memoized in production for max performance) and filters out any packs that don't have any css attached with them.
def safe_stylesheet_packs_with_chunks_tag(*array_of_pack_names)
stylesheet_packs_with_chunks_tag(*WebpackerPacksService.safe_additional_webpacker_css_entry_packs_to_load(*array_of_pack_names))
end
module WebpackerPacksService
def self.webpacker_entry_packs_with_css
if Rails.env.development?
calculate_webpacker_entry_packs_with_css
else
@webpacker_entry_packs_with_css ||= calculate_webpacker_entry_packs_with_css
end
end
def self.calculate_webpacker_entry_packs_with_css
JSON.load(File.read(Rails.root.join("public/packs/manifest.json")))['entrypoints'].select {|pack_name, manifest| manifest['css'].present? }.keys
end
def self.safe_additional_webpacker_css_entry_packs_to_load(*array_of_pack_names)
@safe_additional_webpacker_css_entry_packs_to_load ||= {}
return @safe_additional_webpacker_css_entry_packs_to_load[array_of_pack_names] if @safe_additional_webpacker_css_entry_packs_to_load.has_key?(array_of_pack_names)
@safe_additional_webpacker_css_entry_packs_to_load[array_of_pack_names] = array_of_pack_names & webpacker_entry_packs_with_css
end
end |
|
For me it was related to having the After I removed that, everything worked on heroku! |
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".
As usual, I have:
As you can see, the manifest.json is there. The related js and css files are there too.
What puzzles me is the line:
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:
No issue in development mode or test mode.
The text was updated successfully, but these errors were encountered: