Add support for React 18 server rendering

node_package/src/ReactOnRails.ts

@@ -1,4 +1,3 @@
-import ReactDOM from 'react-dom';
 import type { ReactElement, Component } from 'react';
 
 import * as ClientStartup from './clientStartup';
@@ -19,6 +18,8 @@ import type {
   AuthenticityHeaders,
   StoreGenerator
 } from './types/index';
+import reactHydrate from './reactHydrate';
+import reactRender from './reactRender';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 type Store = any;
@@ -187,9 +188,9 @@ ctx.ReactOnRails = {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactOutput({ componentObj, props, domNodeId });
 
-    const render = hydrate ? ReactDOM.hydrate : ReactDOM.render;
+    const render = hydrate ? reactHydrate : reactRender;
     // eslint-disable-next-line react/no-render-return-value
-    return render(reactElement as ReactElement, document.getElementById(domNodeId));
+    return render(document.getElementById(domNodeId) as Element, reactElement as ReactElement);
   },
 
   /**

node_package/src/clientStartup.ts

@@ -9,6 +9,8 @@ import type {
 
 import createReactOutput from './createReactOutput';
 import {isServerRenderHash} from './isServerRenderResult';
+import reactHydrate from './reactHydrate';
+import reactRender from './reactRender';
 
 declare global {
   interface Window {
@@ -150,7 +152,8 @@ function render(el: Element, railsContext: RailsContext): void {
       }
 
       // Hydrate if available and was server rendered
-      const shouldHydrate = !!ReactDOM.hydrate && !!domNode.innerHTML;
+      // @ts-expect-error potentially present if React 18 or greater
+      const shouldHydrate = !!(ReactDOM.hydrate || ReactDOM.hydrateRoot) && !!domNode.innerHTML;
 
       const reactElementOrRouterResult = createReactOutput({
         componentObj,
@@ -166,9 +169,9 @@ function render(el: Element, railsContext: RailsContext): void {
 You returned a server side type of react-router error: ${JSON.stringify(reactElementOrRouterResult)}
 You should return a React.Component always for the client side entry point.`);
       } else if (shouldHydrate) {
-        ReactDOM.hydrate(reactElementOrRouterResult as ReactElement, domNode);
+        reactHydrate(domNode, reactElementOrRouterResult as ReactElement);
       } else {
-        ReactDOM.render(reactElementOrRouterResult as ReactElement, domNode);
+        reactRender(domNode, reactElementOrRouterResult as ReactElement);
       }
     }
   } catch (e) {

node_package/src/reactHydrate.ts

@@ -0,0 +1,12 @@
+import ReactDOM from 'react-dom';
+import { ReactElement, Component } from 'react';
+
+export default function reactHydrate(domNode: Element, reactElement: ReactElement): void | Element | Component {
+  // @ts-expect-error potentially present if React 18 or greater
+  if (ReactDOM.hydrateRoot) {
+    // @ts-expect-error potentially present if React 18 or greater
+    return ReactDOM.hydrateRoot(domNode, reactElement);
+  }
+
+  return ReactDOM.hydrate(reactElement, domNode);
+}

node_package/src/reactRender.ts

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+import { ReactElement, Component } from 'react';
+
+export default function reactRender(domNode: Element, reactElement: ReactElement): void | Element | Component {
+  // @ts-expect-error potentially present if React 18 or greater
+  if (ReactDOM.createRoot) {
+    // @ts-expect-error potentially present if React 18 or greater
+    const root = ReactDOM.createRoot(domNode);
+    root.render(reactElement);
+    return root
+  }
+
+  // eslint-disable-next-line react/no-render-return-value
+  return ReactDOM.render(reactElement, domNode);
+}