Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stylesheet_pack_tag and stylesheet_packs_with_chunks_tag should NOT raise exception if the pack has no CSS - solves webpacker can't find application.css #3022

Closed
feliperaul opened this issue May 17, 2021 · 0 comments

Comments

@feliperaul
Copy link
Contributor

I'm willing to issue a pull request but I'd like to have some feedback from the maintainers first.

This morning I got bit in production by the Webpacker::Manifest::MissingEntryError due to importing packs that didn't have any CSS imported.

Given how much activity and votes #2071 still generates (in May 2021) I think the developer experience can be improved, because it's causing a lot of pain and I see people fiddling with solutions like "always ensure you import at least one empty css file" flying around .

The problem is:

  • The default extract_css config in webpacker.yml in development and test (!) envs is false, so it will only bite in production; we must avoid these kinds of errors at all costs.
  • It shouldn't be up to the developer to know if the imported packs have or don't have any CSS being imported; specially in large packs, it's very difficult to follow the graph to check them all, and, again, if someone adds a new pack to the import that doesn't have any CSS, it will only explode in production;

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.

  1. Replace in your layouts all stylesheet_packs_with_chunks_tag with this new method we'll create, named safe_stylesheet_packs_with_chunks_tag:

  2. Define this in your ApplicationHelper:

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
  1. In your app/services (create folder if it doesn't exist), create this webpacker_packs_service.rb file:
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants