Optimize react-dom/server bundle size

Author: alexeyr

node_package/src/handleError.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ReactDOMServer } from './reactApis.cts';
+import { renderToString } from './reactApis.cts';
 import type { ErrorOptions } from './types/index.ts';
 
 function handleRenderFunctionIssue(options: ErrorOptions): string {
@@ -60,8 +60,8 @@ Message: ${e.message}
 ${e.stack}`;
 
     const reactElement = React.createElement('pre', null, msg);
-    if (typeof ReactDOMServer.renderToString === 'function') {
-      return ReactDOMServer.renderToString(reactElement);
+    if (typeof renderToString === 'function') {
+      return renderToString(reactElement);
     }
     return msg;
   }

node_package/src/reactApis.cts

@@ -10,6 +10,10 @@ export const supportsRootApi = reactMajorVersion >= 18;
 
 export const supportsHydrate = supportsRootApi || 'hydrate' in ReactDOM;
 
+// Depending on react-dom version, proper ESM import can be react-dom/server or react-dom/server.js
+// but this always works in this .cts file
+export { renderToPipeableStream, renderToString, type PipeableStream } from 'react-dom/server';
+
 // TODO: once React dependency is updated to >= 18, we can remove this and just
 // import ReactDOM from 'react-dom/client';
 let reactDomClient: typeof import('react-dom/client');
@@ -26,21 +30,6 @@ if (supportsRootApi) {
   }
 }
 
-export const ReactDOMServer = /* #__PURE */ (() => {
-  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,react/no-deprecated --

node_package/src/serverRenderReactComponent.ts

@@ -6,7 +6,7 @@ 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 { renderToString } from './reactApis.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type {
   CreateReactOutputResult,
@@ -47,7 +47,7 @@ function processServerRenderHash(result: ServerRenderResult, options: RenderOpti
 
 function processReactElement(result: ReactElement): string {
   try {
-    return ReactDOMServer.renderToString(result);
+    return renderToString(result);
   } catch (error) {
     console.error(`Invalid call to renderToString. Possibly you have a renderFunction, a function that already
 calls renderToString, that takes one parameter. You need to add an extra unused parameter to identify this function

node_package/src/streamServerRenderedReactComponent.ts

@@ -6,7 +6,7 @@ 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 { renderToPipeableStream, PipeableStream } from './reactApis.cts';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils.ts';
 import type { RenderParams, StreamRenderState, StreamableComponentResult } from './types/index.ts';
 
@@ -101,8 +101,8 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
     },
   });
 
-  let pipedStream: ReactDOMServer.PipeableStream | null = null;
-  const pipeToTransform = (pipeableStream: ReactDOMServer.PipeableStream) => {
+  let pipedStream: PipeableStream | null = null;
+  const pipeToTransform = (pipeableStream: PipeableStream) => {
     pipeableStream.pipe(transformStream);
     pipedStream = pipeableStream;
   };
@@ -164,7 +164,7 @@ const streamRenderReactComponent = (
         return;
       }
 
-      const renderingStream = ReactDOMServer.renderToPipeableStream(reactRenderedElement, {
+      const renderingStream = renderToPipeableStream(reactRenderedElement, {
         onShellError(e) {
           sendErrorHtml(convertToError(e));
         },