react-on-rails 16.2.0-test.7 → 16.2.0

package/lib/ClientRenderer.js

@@ -51,11 +51,48 @@ function renderElement(el, railsContext) {
     try {
         const domNode = document.getElementById(domNodeId);
         if (domNode) {
+            // Check if this component was already rendered by a previous call
+            // This prevents hydration errors when reactOnRailsPageLoaded() is called multiple times
+            // (e.g., for asynchronously loaded content)
+            const existing = renderedRoots.get(domNodeId);
+            if (existing) {
+                // Only skip if it's the exact same DOM node and it's still connected to the document.
+                // If the node was replaced (e.g., via innerHTML or Turbo), we need to unmount the old
+                // root and re-render to the new node to prevent memory leaks and ensure rendering works.
+                const sameNode = existing.domNode === domNode && existing.domNode.isConnected;
+                if (sameNode) {
+                    if (trace) {
+                        console.log(`Skipping already rendered component: ${name} (dom id: ${domNodeId})`);
+                    }
+                    return;
+                }
+                // DOM node was replaced (e.g., via async HTML injection) - clean up the old root
+                try {
+                    if (supportsRootApi &&
+                        existing.root &&
+                        typeof existing.root === 'object' &&
+                        'unmount' in existing.root) {
+                        existing.root.unmount();
+                    }
+                    else {
+                        unmountComponentAtNode(existing.domNode);
+                    }
+                }
+                catch (unmountError) {
+                    // Ignore unmount errors for replaced nodes
+                    if (trace) {
+                        console.log(`Error unmounting replaced component: ${name}`, unmountError);
+                    }
+                }
+                renderedRoots.delete(domNodeId);
+            }
             const componentObj = ComponentRegistry.get(name);
             if (delegateToRenderer(componentObj, props, railsContext, domNodeId, trace)) {
                 return;
             }
-            // Hydrate if available and was server rendered
+            // Hydrate if the DOM node has content (server-rendered HTML)
+            // Since we skip already-rendered components above, this check now correctly
+            // identifies only server-rendered content, not previously client-rendered content
             const shouldHydrate = !!domNode.innerHTML;
             const reactElementOrRouterResult = createReactOutput({
                 componentObj,

package/lib/pageLifecycle.js

@@ -50,7 +50,16 @@ function initializePageEventListeners() {
         return;
     }
     isPageLifecycleInitialized = true;
-    if (document.readyState !== 'loading') {
+    // Important: replacing this condition with `document.readyState !== 'loading'` is not valid
+    // As the core ReactOnRails needs to ensure that all component bundles are loaded and executed before hydrating them
+    // If the `document.readyState === 'interactive'`, it doesn't guarantee that deferred scripts are executed
+    // the `readyState` can be `'interactive'` while the deferred scripts are still being executed
+    // Which will lead to the error `"Could not find component registered with name <component name>"`
+    // It will happen if this line is reached before the component chunk is executed on browser and reached the line
+    // ReactOnRails.register({ Component });
+    // ReactOnRailsPro is resellient against that type of race conditions, but it won't wait for that state anyway
+    // As it immediately hydrates the components at the page as soon as its html and bundle is loaded on the browser
+    if (document.readyState === 'complete') {
         setupPageNavigationListeners();
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "16.2.0-test.7",
+  "version": "16.2.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "lib/ReactOnRails.full.js",
   "type": "module",