Import ReactDOMServer from reactApis instead of directly

Author: alexeyr

node_package/src/handleError.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOMServer from 'react-dom/server';
+import { ReactDOMServer } from './reactApis.cts';
 import type { ErrorOptions } from './types/index.ts';
 
 function handleRenderFunctionIssue(options: ErrorOptions): string {

node_package/src/reactApis.cts

@@ -1,3 +1,4 @@
+/* eslint-disable global-require,@typescript-eslint/no-require-imports */
 import * as ReactDOM from 'react-dom';
 import type { ReactElement } from 'react';
 import type { RenderReturnType } from './types/index.ts' with { 'resolution-mode': 'import' };
@@ -15,7 +16,6 @@ if (supportsRootApi) {
   // 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,@typescript-eslint/no-require-imports
     reactDomClient = require('react-dom/client') as typeof import('react-dom/client');
   } catch (_e) {
     // We should never get here, but if we do, we'll just use the default ReactDOM
@@ -24,6 +24,21 @@ if (supportsRootApi) {
   }
 }
 
+export const ReactDOMServer = (() => {
+  try {
+    // in react-dom v18+
+    return require('react-dom/server') as typeof import('react-dom/server');
+  } catch (_e) {
+    try {
+      // in react-dom v16 or 17
+      return require('react-dom/server.js') as typeof import('react-dom/server');
+    } catch (_e2) {
+      // this should never happen, one of the above requires should succeed
+      return undefined as unknown as typeof import('react-dom/server');
+    }
+  }
+})();
+
 type HydrateOrRenderType = (domNode: Element, reactElement: ReactElement) => RenderReturnType;
 
 /* eslint-disable @typescript-eslint/no-deprecated,@typescript-eslint/no-non-null-assertion --

node_package/src/serverRenderReactComponent.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import * as ReactDOMServer from 'react-dom/server';
 import type { ReactElement } from 'react';
 
 import * as ComponentRegistry from './ComponentRegistry.ts';
 import createReactOutput from './createReactOutput.ts';
 import { isPromise, isServerRenderHash } from './isServerRenderResult.ts';
 import buildConsoleReplay from './buildConsoleReplay.ts';
 import handleError from './handleError.ts';
+import { ReactDOMServer } from './reactApis.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type {
   CreateReactOutputResult,

node_package/src/streamServerRenderedReactComponent.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import * as ReactDOMServer from 'react-dom/server';
 import { PassThrough, Readable } from 'stream';
 
 import * as ComponentRegistry from './ComponentRegistry.ts';
 import createReactOutput from './createReactOutput.ts';
 import { isPromise, isServerRenderHash } from './isServerRenderResult.ts';
 import buildConsoleReplay from './buildConsoleReplay.ts';
 import handleError from './handleError.ts';
+import { ReactDOMServer } from './reactApis.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type { RenderParams, StreamRenderState, StreamableComponentResult } from './types/index.ts';