Move React/Shakapacker version compatibility to generator smoke tests

.github/workflows/examples.yml

@@ -137,7 +137,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Save root ruby gems to cache
@@ -180,8 +180,24 @@ jobs:
       - name: Set packer version environment variable
         run: |
           echo "CI_DEPENDENCY_LEVEL=${{ matrix.dependency-level }}" >> $GITHUB_ENV
-      - name: Main CI
-        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples
+      - name: Verify rake tasks exist
+        run: |
+          cd react_on_rails
+          echo "Available shakapacker_examples tasks:"
+          bundle exec rake -T | grep shakapacker_examples || true
+          # Verify the specific task we need exists
+          TASK_NAME="run_rspec:shakapacker_examples_${{ matrix.dependency-level == 'latest' && 'latest' || 'pinned' }}"
+          if ! bundle exec rake -T | grep -q "$TASK_NAME"; then
+            echo "ERROR: Required rake task '$TASK_NAME' not found!"
+            exit 1
+          fi
+          echo "✓ Found required task: $TASK_NAME"
+      - name: Main CI - Latest version examples
+        if: matrix.dependency-level == 'latest'
+        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples_latest
+      - name: "Main CI - Pinned version examples (React 16, 17, 18 with Shakapacker 8.2.0)"
+        if: matrix.dependency-level == 'minimum'
+        run: cd react_on_rails && bundle exec rake run_rspec:shakapacker_examples_pinned
       - name: Store test results
         uses: actions/upload-artifact@v4
         with:

.github/workflows/integration-tests.yml

@@ -140,7 +140,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Install Node modules with pnpm for renderer package
@@ -229,7 +229,7 @@ jobs:
           echo "Node version: "; node -v
           echo "pnpm version: "; pnpm --version
           echo "Bundler version: "; bundle --version
-      - name: run conversion script to support shakapacker v6
+      - name: Run conversion script for older Node compatibility
         if: matrix.dependency-level == 'minimum'
         run: script/convert
       - name: Save root ruby gems to cache

package.json

@@ -31,8 +31,8 @@
     "@tsconfig/node14": "^14.1.2",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.17.16",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@types/turbolinks": "^5.2.2",
     "create-react-class": "^15.7.0",
     "eslint": "^9.24.0",
@@ -58,8 +58,9 @@
     "prettier": "^3.5.2",
     "prop-types": "^15.8.1",
     "publint": "^0.3.4",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-on-rails-rsc": "19.0.2",
     "redux": "^4.2.1",
     "size-limit": "^12.0.0",
     "stylelint": "^16.14.0",

packages/react-on-rails/src/ClientRenderer.ts

@@ -174,7 +174,6 @@ function unmountAllComponents(): void {
         root.unmount();
       } else {
         // React 16-17 legacy API
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
         unmountComponentAtNode(domNode);
       }
     } catch (error) {

packages/react-on-rails/src/reactApis.cts

@@ -4,6 +4,14 @@ import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
 
+// Type for legacy React DOM APIs (React 16/17) that were removed from @types/react-dom@19
+// These are only used at runtime when supportsRootApi is false
+interface LegacyReactDOM {
+  hydrate(element: ReactElement, container: Element): void;
+  render(element: ReactElement, container: Element): RenderReturnType;
+  unmountComponentAtNode(container: Element): boolean;
+}
+
 const reactMajorVersion = Number(ReactDOM.version?.split('.')[0]) || 16;
 
 // TODO: once we require React 18, we can remove this and inline everything guarded by it.
@@ -29,12 +37,27 @@ if (supportsRootApi) {
 
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
-/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion,react/no-deprecated --
- * while we need to support React 16
- */
+// Cast ReactDOM to include legacy APIs for React 16/17 compatibility
+// These methods exist at runtime but are removed from @types/react-dom@19
+const legacyReactDOM = ReactDOM as unknown as LegacyReactDOM;
+
+// Validate legacy APIs exist at runtime when needed (React < 18)
+if (!supportsRootApi) {
+  if (typeof legacyReactDOM.hydrate !== 'function') {
+    throw new Error('React legacy hydrate API not available. Expected React 16/17.');
+  }
+  if (typeof legacyReactDOM.render !== 'function') {
+    throw new Error('React legacy render API not available. Expected React 16/17.');
+  }
+  if (typeof legacyReactDOM.unmountComponentAtNode !== 'function') {
+    throw new Error('React legacy unmountComponentAtNode API not available. Expected React 16/17.');
+  }
+}
+
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- reactDomClient is always defined when supportsRootApi is true */
 export const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+  : (domNode, reactElement) => legacyReactDOM.hydrate(reactElement, domNode);
 
 export function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
   if (supportsRootApi) {
@@ -43,14 +66,14 @@ export function reactRender(domNode: Element, reactElement: ReactElement): Rende
     return root;
   }
 
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
+  return legacyReactDOM.render(reactElement, domNode);
 }
 
-export const unmountComponentAtNode: typeof ReactDOM.unmountComponentAtNode = supportsRootApi
+export const unmountComponentAtNode: (container: Element) => boolean = supportsRootApi
   ? // not used if we use root API
-    () => false
-  : ReactDOM.unmountComponentAtNode;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_container: Element) => false
+  : (container: Element) => legacyReactDOM.unmountComponentAtNode(container);
 
 export const ensureReactUseAvailable = () => {
   if (!('use' in React) || typeof React.use !== 'function') {

packages/react-on-rails/src/types/index.ts

@@ -125,9 +125,9 @@ interface ServerRenderResult {
   error?: Error;
 }
 
-type CreateReactOutputSyncResult = ServerRenderResult | ReactElement<unknown>;
+type CreateReactOutputSyncResult = ServerRenderResult | ReactElement;
 
-type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement<unknown>>;
+type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement>;
 
 type CreateReactOutputResult = CreateReactOutputSyncResult | CreateReactOutputAsyncResult;