feat: react18 legacy mode & react17 support

Author: jesse23

README.md

@@ -609,6 +609,11 @@ export default defineConfig({
 })
 ```
 
+### React17 Support
+
+- for react18, with flag `useReact17: true`, it will use the legacy `render` and `hydrate` methods.
+- for react17, on top of above, you will need minor update to react and react-dom [example](https://github.com/jesse23/webpack-test-bed/blob/main/scripts/define-react-exports.js) to polyfill the mjs import and the `react-dom/client`.
+
 ## Roadmap
 
 - [x] Preload assets

package.json

@@ -85,8 +85,8 @@
     "beasties": "^0.1.0",
     "critters": "^0.0.24",
     "prettier": "*",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.2||^18.0.0",
+    "react-dom": "^17.0.2||^18.0.0",
     "react-router-dom": "^6.14.1",
     "styled-components": "^6.0.0",
     "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"

src/client/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { createRoot as ReactDOMCreateRoot, hydrateRoot } from 'react-dom/client'
+import { hydrate, render } from 'react-dom'
 import { HelmetProvider } from 'react-helmet-async'
 import { RouterProvider, createBrowserRouter, matchRoutes } from 'react-router-dom'
 import type { RouteRecord, RouterOptions, ViteReactSSGClientOptions, ViteReactSSGContext } from '../types'
@@ -117,15 +118,25 @@ export function ViteReactSSG(
       )
       const isSSR = document.querySelector('[data-server-rendered=true]') !== null
       if (!isSSR && process.env.NODE_ENV === 'development') {
-        const root = ReactDOMCreateRoot(container)
-        React.startTransition(() => {
-          root.render(app)
-        })
+        if (options.useReact17) {
+          render(app, container)
+        }
+        else {
+          const root = ReactDOMCreateRoot(container)
+          React.startTransition(() => {
+            root.render(app)
+          })
+        }
       }
       else {
-        React.startTransition(() => {
-          hydrateRoot(container, app)
-        })
+        if (options.useReact17) {
+          hydrate(app, container)
+        }
+        else {
+          React.startTransition(() => {
+            hydrateRoot(container, app)
+          })
+        }
       }
     })()
   }

src/client/single-page.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react'
 import { createRoot as ReactDOMCreateRoot, hydrateRoot } from 'react-dom/client'
 import { HelmetProvider } from 'react-helmet-async'
 import React from 'react'
+import { hydrate, render } from 'react-dom'
 import type { ViteReactSSGClientOptions, ViteReactSSGContext } from '../types'
 import { documentReady } from '../utils/document-ready'
 import { deserializeState } from '../utils/state'
@@ -87,18 +88,28 @@ export function ViteReactSSG(
         <HelmetProvider>
           {App}
         </HelmetProvider>
-      ) as ReactNode
+      ) as JSX.Element
       const isSSR = document.querySelector('[data-server-rendered=true]') !== null
       if (!isSSR && process.env.NODE_ENV === 'development') {
-        const root = ReactDOMCreateRoot(container)
-        React.startTransition(() => {
-          root.render(app)
-        })
+        if (options.useReact17) {
+          render(app, container)
+        }
+        else {
+          const root = ReactDOMCreateRoot(container)
+          React.startTransition(() => {
+            root.render(app)
+          })
+        }
       }
       else {
-        React.startTransition(() => {
-          hydrateRoot(container, app)
-        })
+        if (options.useReact17) {
+          hydrate(app, container)
+        }
+        else {
+          React.startTransition(() => {
+            hydrateRoot(container, app)
+          })
+        }
       }
     })()
   }

src/client/tanstack.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
-import { createRoot as ReactDOMCreateRoot, hydrateRoot } from 'react-dom/client'
 import { HelmetProvider } from 'react-helmet-async'
 import type { AnyContext, AnyRouter, LoaderFnContext } from '@tanstack/react-router'
 import { RouterProvider } from '@tanstack/react-router'
 import { Meta, StartClient } from '@tanstack/start'
+import { createRoot as ReactDOMCreateRoot, hydrateRoot } from 'react-dom/client'
+import { hydrate, render } from 'react-dom'
 import type { ViteReactSSGContext as BaseViteReactSSGContext, ViteReactSSGClientOptions } from '../types'
 import { documentReady } from '../utils/document-ready'
 import { deserializeState } from '../utils/state'
@@ -172,24 +173,44 @@ export function Experimental_ViteReactSSG(
       const { router } = await createRoot(true)
       const isSSR = document.querySelector('[data-server-rendered=true]') !== null
       if (!isSSR && process.env.NODE_ENV === 'development') {
-        const root = ReactDOMCreateRoot(container)
-        React.startTransition(() => {
-          root.render(
+        if (options.useReact17) {
+          render(
             <HelmetProvider>
               <RouterProvider router={router} />
             </HelmetProvider>,
+            container,
           )
-        })
+        }
+        else {
+          const root = ReactDOMCreateRoot(container)
+          React.startTransition(() => {
+            root.render(
+              <HelmetProvider>
+                <RouterProvider router={router} />
+              </HelmetProvider>,
+            )
+          })
+        }
       }
       else {
-        React.startTransition(() => {
-          hydrateRoot(
-            container,
+        if (options.useReact17) {
+          hydrate(
             <HelmetProvider>
               <StartClient router={router} />
             </HelmetProvider>,
+            container,
           )
-        })
+        }
+        else {
+          React.startTransition(() => {
+            hydrateRoot(
+              container,
+              <HelmetProvider>
+                <StartClient router={router} />
+              </HelmetProvider>,
+            )
+          })
+        }
       }
     })()
   }

src/node/serverRenderer.tsx

@@ -7,15 +7,20 @@
 
 import { Writable } from 'node:stream'
 import type { ReactNode } from 'react'
-import { renderToPipeableStream } from 'react-dom/server'
+import * as ReactDomServer from 'react-dom/server'
 
 export async function renderStaticApp(app: ReactNode): Promise<string> {
+  // fallback to react17
+  if (!ReactDomServer.renderToPipeableStream) {
+    return ReactDomServer.renderToString(app)
+  };
+
   // Inspired from
   // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
   // https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/static-entry.js
   const writableStream = new WritableAsPromise()
 
-  const { pipe } = renderToPipeableStream(app, {
+  const { pipe } = ReactDomServer.renderToPipeableStream(app, {
     onError(error) {
       writableStream.destroy(error as Error)
     },

src/types.ts

@@ -168,6 +168,8 @@ export interface ViteReactSSGClientOptions {
    */
   ssrWhenDev?: boolean
   getStyleCollector?: (() => StyleCollector | Promise<StyleCollector>) | null
+  // true if the app is based on react17, or react18 with old API
+  useReact17?: boolean
 }
 
 interface CommonRouteOptions {