Failure to ssg via react-router since upgrading to vite 7

[peterbe]

I'm trying to do server-side generating (SSG) using vite (v7) and react-router (v7).

This used to work, in vite v6:

import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router";
import { createServer } from "vite";


const vite = await createServer({
  server: { middlewareMode: true },
  appType: "custom",
});

const { default: AppRoutes } = await vite.ssrLoadModule("/src/AppRoutes");

const html = renderToString(
    <StaticRouter location={path} >
      <AppRoutes />
    </StaticRouter>,
  );
console.log(html);

The src/AppRoutes.tsx looks like this:

import { Route, Routes } from "react-router";

export default function AppRoutes() {
  return (
    <Routes>
      <Route element={<Layout />}>
        <Route path="/" element={<App />} />
      </Route>
    </Routes>
  );
}

That used to work but since I upgrade from vite 6, to vite 7, I now get this error:

Error: 183 |     options
184 |   );
185 | }
186 | function invariant(value, message) {
187 |   if (value === false || value === null || typeof value === "undefined") {
188 |     throw new Error(message);
                    ^
error: useRoutes() may be used only in the context of a <Router> component.
      at invariant (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:188:15)
      at useRoutesImpl (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-router/dist/development/chunk-UIGDSWPH.mjs:5443:3)
      at renderWithHooks (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5062:19)
      at renderElement (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5497:23)
      at retryNode (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6428:21)
      at renderNodeDestructive (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6367:11)
      at finishFunctionComponent (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5106:13)
      at renderElement (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:5552:11)
      at retryNode (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6428:21)
      at renderNodeDestructive (/Users/peterbengtsson/dev/JAVASCRIPT/spot-the-difference/node_modules/react-dom/cjs/react-dom-server-legacy.browser.development.js:6367:11)

[hi-ogawa]

I don't think this was intended to work in the first place as it's loading react-router outside of vite (as StaticRouter) ans inside of vite (as Route/Routes).

Alternatively, StaticRouter should be also processed inside vite world by something like:

// 3rd file: ssg.tsx
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router";
import AppRoutes from "./AppRoutes.tsx";

export function mySsg() {
  return renderToString(
    <StaticRouter location={path} >
      <AppRoutes />
    </StaticRouter>,
  )
}

and execute

const { mySsg } = ssrLoadModule("./src/ssg.tsx")
const html = mySsg();

[peterbe]

Yeah! Thank you! That works.

[peterbe]

Thank you @hi-ogawa That got me unstuck!
Hopefully this discussion here will be useful for others.