fix: resolve Shakapacker append/pack tag ordering issue

justin808 · justin808 · commit 23b25b31135b · 2025-09-27T16:51:18.000-10:00
- Keep pack tags at end of body to allow react_component append calls
- Add data-turbo-suppress-warning to body tags to suppress Turbo warning
- This fixes CI failures while maintaining Shakapacker requirements
- React components can now properly append their JavaScript packs
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -9,12 +9,9 @@
   <%= append_javascript_pack_tag('stimulus-bundle') %>
   <%= append_javascript_pack_tag('stores-registration') %>
 
-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
-
   <%= csrf_meta_tags %>
 </head>
-<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
+<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700" data-turbo-suppress-warning="true">
   <%= react_component "NavigationBarApp" %>
 
   <div class="container mx-auto px-4 flex-grow">
@@ -23,6 +20,9 @@
 
   <%= react_component "Footer" %>
 
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
+
   <!-- This is a placeholder for ReactOnRails to know where to render the store props for
       client side hydration -->
   <%= redux_store_hydration_data %>
diff --git a/app/views/layouts/stimulus_layout.html.erb b/app/views/layouts/stimulus_layout.html.erb
@@ -9,17 +9,17 @@
 
   <%= append_stylesheet_pack_tag('stimulus-bundle') %>
   <%= append_javascript_pack_tag('stimulus-bundle') %>
-  
-  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
-  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 </head>
-<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
+<body class="min-h-screen flex flex-col bg-sky-50 text-gray-700" data-turbo-suppress-warning="true">
   <%= react_component "NavigationBarApp" %>
 
   <div class="container mx-auto px-4 flex-grow">
     <%= yield %>
   </div>
 
   <%= react_component "Footer" %>
+  
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 </body>
 </html>
