brentd / xray-rails

☠️ A development tool that reveals your UI's bones
MIT License
1.22k stars 79 forks source link

Xray fails to inject itself when using jQuery in Webpacker #106

Open phoozle opened 4 years ago

phoozle commented 4 years ago

Not sure if anyone has had this issue before or I have misconfigured something badly but as far as I can tell xray-rails will not work when using jQuery from Webpacker due it scanning your html for a jQuery script tag in your

Gem versions I am using: Rails: v5.2.3 Sprockets: v3.7.2 Xray: 0.3.2

Offending line:

# middleware.rb
if append_js!(body, 'jquery', 'xray')
  inject_xray_bar!(body)
end

Workaround: Create an empty jquery.js somewhere so that it is included in your application.js manifest file which allows X-ray to append itself. Make sure that your Webpack bundle that includes jQuery is loaded before your sprockets application.js. E.g.

  <%= javascript_pack_tag 'application' %>
  <%= javascript_include_tag 'application' %>
TylerRick commented 3 years ago

I ran into a similar problem (mine happened to be due to Sprockets 4, but I'm sure I would/will eventually run into it with Webpack too): see #110

I thought of doing that same workaround, too — creating an empty jquery.js — but then fortunately realized that there's an even easier solution — just include xray yourself — instead of including jquery just to get xray to auto-add itself after jquery:

<%= javascript_include_tag 'xray', nonce: true if Rails.env.development? %>

Now that I've thought more about it, I honestly think the auto-adding the script feature is overrated, over-complicated, and error-prone (#98, #100), and I propose we just remove it (#110).