Fix ReactDOM build errors

Author: alexeyr

node_package/src/ClientSideRenderer.ts

@@ -1,5 +1,4 @@
 /* eslint-disable max-classes-per-file */
-/* eslint-disable react/no-deprecated,@typescript-eslint/no-deprecated -- while we need to support React 16 */
 
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
@@ -8,8 +7,8 @@ import type { RailsContext, RegisteredComponent, RenderFunction, Root } from './
 import { getContextAndRailsContext, resetContextAndRailsContext, type Context } from './context.ts';
 import createReactOutput from './createReactOutput.ts';
 import { isServerRenderHash } from './isServerRenderResult.ts';
-import reactHydrateOrRender from './reactHydrateOrRender.ts';
 import { supportsRootApi } from './reactApis.ts';
+import reactHydrateOrRender from './reactHydrateOrRender.ts';
 import { debugTurbolinks } from './turbolinksUtils.ts';
 
 const REACT_ON_RAILS_STORE_ATTRIBUTE = 'data-js-react-on-rails-store';
@@ -101,8 +100,7 @@ class ComponentRenderer {
         }
 
         // Hydrate if available and was server rendered
-        // @ts-expect-error potentially present if React 18 or greater
-        const shouldHydrate = !!(ReactDOM.hydrate || ReactDOM.hydrateRoot) && !!domNode.innerHTML;
+        const shouldHydrate = (supportsRootApi || 'hydrate' in ReactDOM) && !!domNode.innerHTML;
 
         const reactElementOrRouterResult = createReactOutput({
           componentObj,
@@ -154,7 +152,9 @@ You should return a React.Component always for the client side entry point.`);
       }
 
       try {
-        ReactDOM.unmountComponentAtNode(domNode);
+        const unmountComponentAtNode = 'unmountComponentAtNode';
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        ReactDOM[unmountComponentAtNode](domNode);
       } catch (e: unknown) {
         const error = e instanceof Error ? e : new Error('Unknown error');
         console.info(

node_package/src/reactHydrateOrRender.ts

@@ -22,12 +22,15 @@ if (supportsRootApi) {
   }
 }
 
-/* eslint-disable react/no-deprecated,@typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
+/* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --
  * while we need to support React 16
  */
+const hydrateProp = 'hydrate';
+const renderProp = 'render';
+
 const reactHydrate: HydrateOrRenderType = supportsRootApi
   ? reactDomClient!.hydrateRoot
-  : (domNode, reactElement) => ReactDOM.hydrate(reactElement, domNode);
+  : (domNode, reactElement) => ReactDOM[hydrateProp](reactElement, domNode);
 
 function reactRender(domNode: Element, reactElement: ReactElement): RenderReturnType {
   if (supportsRootApi) {
@@ -36,10 +39,9 @@ function reactRender(domNode: Element, reactElement: ReactElement): RenderReturn
     return root;
   }
 
-  // eslint-disable-next-line react/no-render-return-value
-  return ReactDOM.render(reactElement, domNode);
+  return ReactDOM[renderProp](reactElement, domNode);
 }
-/* eslint-enable react/no-deprecated,@typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion */
+/* eslint-enable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion */
 
 export default function reactHydrateOrRender(
   domNode: Element,