feat: complete React on Rails v16 auto-registration migration

ihabadham · claude · ihabadham · commit fd008adb172e · 2025-09-23T16:41:26.000+03:00
- Enable auto_load_bundle for automatic component discovery and loading - Update layouts to use append pack tag pattern for v16 compatibility - Remove manual component registration from stimulus-bundle.js - Maintain hybrid approach supporting both auto-registered React components and Stimulus controllers - Auto-registration now working: pages load only their specific component bundles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -5,13 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('client-bundle',
-                                        media: 'all',
-                                        'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('client-bundle',
-                                       'data-turbolinks-track': true,
-                                       defer: true) %>
+  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stores-registration') %>
 
   <%= csrf_meta_tags %>
 </head>
@@ -24,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
@@ -5,15 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>RailsReactTutorial</title>
 
-  <%= stylesheet_pack_tag('client-bundle',
-                                        media: 'all',
-                                        'data-turbolinks-track': true) %>
-
-  <%= javascript_pack_tag('stimulus-bundle',
-                                       'data-turbolinks-track': true,
-                                       defer: true) %>
-
   <%= csrf_meta_tags %>
+
+  <%= append_stylesheet_pack_tag('stimulus-bundle') %>
+  <%= append_javascript_pack_tag('stimulus-bundle') %>
 </head>
 <body class="min-h-screen flex flex-col bg-sky-50 text-gray-700">
   <%= react_component "NavigationBarApp" %>
@@ -23,5 +18,8 @@
   </div>
 
   <%= react_component "Footer" %>
+
+  <%= stylesheet_pack_tag(media: 'all', 'data-turbolinks-track': true) %>
+  <%= javascript_pack_tag('data-turbolinks-track': true, defer: true) %>
 </body>
 </html>
diff --git a/client/app/packs/stimulus-bundle.js b/client/app/packs/stimulus-bundle.js
@@ -5,9 +5,6 @@ import { Turbo } from '@hotwired/turbo-rails';
 // eslint-disable-next-line no-unused-vars
 import controllers from '../controllers';
 
-import NavigationBarApp from '../bundles/comments/startup/NavigationBarApp';
-import Footer from '../bundles/comments/components/Footer/Footer';
-
 import '../assets/styles/application';
 
 Turbo.session.drive = false;
@@ -18,7 +15,5 @@ ReactOnRails.setOptions({
   traceTurbolinks: true,
 });
 
-ReactOnRails.register({
-  NavigationBarApp,
-  Footer,
-});
+// Components are now auto-registered via ror_components directories
+// No need for manual registration
