"react": ">= 18"

Author: Romex91

node_package/src/clientStartup.ts

@@ -12,7 +12,6 @@ import type { Context } from './context';
 import createReactOutput from './createReactOutput';
 import { isServerRenderHash } from './isServerRenderResult';
 import reactHydrateOrRender from './reactHydrateOrRender';
-import { supportsRootApi } from './reactApis';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
@@ -168,9 +167,7 @@ You returned a server side type of react-router error: ${JSON.stringify(reactEle
 You should return a React.Component always for the client side entry point.`);
       } else {
         const rootOrElement = reactHydrateOrRender(domNode, reactElementOrRouterResult as ReactElement, shouldHydrate);
-        if (supportsRootApi) {
-          context.roots.push(rootOrElement as Root);
-        }
+        context.roots.push(rootOrElement as Root);
       }
     }
   } catch (e: any) {
@@ -211,9 +208,7 @@ export function reactOnRailsPageLoaded(): void {
   if (!railsContext) return;
 
   const context = findContext();
-  if (supportsRootApi) {
-    context.roots = [];
-  }
+  context.roots = [];
   forEachStore(context, railsContext);
   forEachReactOnRailsComponentRender(context, railsContext);
 }
@@ -227,46 +222,23 @@ export function reactOnRailsComponentLoaded(domId: string): void {
   if (!railsContext) return;
 
   const context = findContext();
-  if (supportsRootApi) {
-    context.roots = [];
-  }
+  context.roots = [];
 
   const el = document.querySelector(`[data-dom-id=${domId}]`);
   if (!el) return;
 
   render(el, context, railsContext);
 }
 
-function unmount(el: Element): void {
-  const domNodeId = domNodeIdForEl(el);
-  const domNode = document.getElementById(domNodeId);
-  if (domNode === null) {
-    return;
-  }
-  try {
-    ReactDOM.unmountComponentAtNode(domNode);
-  } catch (e: any) {
-    console.info(`Caught error calling unmountComponentAtNode: ${e.message} for domNode`,
-      domNode, e);
-  }
-}
-
 function reactOnRailsPageUnloaded(): void {
   debugTurbolinks('reactOnRailsPageUnloaded');
-  if (supportsRootApi) {
-    const { roots } = findContext();
+  const { roots } = findContext();
 
-    // If no react on rails components
-    if (!roots) return;
+  // If no react on rails components
+  if (!roots) return;
 
-    for (const root of roots) {
-      root.unmount();
-    }
-  } else {
-    const els = reactOnRailsHtmlElements();
-    for (let i = 0; i < els.length; i += 1) {
-      unmount(els[i]);
-    }
+  for (const root of roots) {
+    root.unmount();
   }
 }
 

node_package/src/reactApis.ts

@@ -1,41 +1,15 @@
 import type { ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDomClient from 'react-dom/client';
 import type { RenderReturnType } from './types';
-import { supportsRootApi } from './reactApis';
 
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
-// TODO: once React dependency is updated to >= 18, we can remove this and just
-// import ReactDOM from 'react-dom/client';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let reactDomClient: any;
-if (supportsRootApi) {
-  // This will never throw an exception, but it's the way to tell Webpack the dependency is optional
-  // https://github.com/webpack/webpack/issues/339#issuecomment-47739112
-  // Unfortunately, it only converts the error to a warning.
-  try {
-    // eslint-disable-next-line global-require,import/no-unresolved
-    reactDomClient = require('react-dom/client');
-  } catch (e) {
-    // We should never get here, but if we do, we'll just use the default ReactDOM
-    // and live with the warning.
-    reactDomClient = ReactDOM;
-  }
-}
-
-const reactHydrate: HydrateOrRenderType = supportsRootApi ?
-  reactDomClient.hydrateRoot :
-  (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+const reactHydrate: HydrateOrRenderType = ReactDomClient.hydrateRoot;
 
 function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
-  if (supportsRootApi) {
-    const root = reactDomClient.createRoot(domNode);
-    root.render(reactElement);
-    return root;
-  }
-
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
+  const root = ReactDomClient.createRoot(domNode);
+  root.render(reactElement);
+  return root;
 }
 
 export default function reactHydrateOrRender(domNode: Element, reactElement: ReactElement, hydrate: boolean): RenderReturnType {

node_package/src/reactHydrateOrRender.ts

@@ -46,8 +46,8 @@
   "dependencies": {
   },
   "peerDependencies": {
-    "react": ">= 16",
-    "react-dom": ">= 16"
+    "react": ">= 18",
+    "react-dom": ">= 18"
   },
   "files": [
     "node_package/lib"