Issues with Vite + SSR

[redbaron76]

I'm trying to achieve SSR in Tanstack Router + React + Vite + Hono in Bun.
Following the SSR guide in the documentation, everything seems to be set up correctly: building works as expected creating both clientand server folders under dist.

My entry-server.tsx file is like this:
( complains about the router type...)

export async function render() {
  const router = createRouter();

  const memoryHistory = createMemoryHistory({
    initialEntries: ["/"],
  });

  router.update({
    history: memoryHistory,
  });

  await router.load();

  const appHtml = ReactDOMServer.renderToString(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    <StartServer<any> router={router} />
  );

  return { html: appHtml };
}

and this is my Hono's ssr middleware:

export const ssr = () => {
  return createMiddleware(async (c, next) => {
    const accept = c.req.header("accept");
    if (accept && accept.includes("text/html")) {
      const templateHtml = await Bun.file(
        "./frontend/dist/client/index.html"
      ).text();

      const render = (
        await import("../../../frontend/dist/server/entry-server.js")
      ).render;

      const rendered = await render();

      const html = templateHtml.replace("<!--app-html-->", rendered.html);

      return c.html(html);
    }
    return await next();
  });
};

await router.load(); crashes, giving me this error:

Warning: useRouter must be used inside a <RouterProvider> component!
44 |   try {
45 |     new URL(`${to}`);
46 |     type = "external";
47 |   } catch {
48 |   }
49 |   const next = router.buildLocation(options);
                    ^
TypeError: null is not an object (evaluating 'router.buildLocation')
      at useLinkProps (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/@tanstack/react-router/dist/esm/link.js:49:16)
      at /Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/@tanstack/react-router/dist/esm/link.js:191:34
      at renderWithHooks (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
      at renderForwardRef (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5857:18)
      at renderElement (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6020:11)
      at renderNodeDestructiveImpl (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
      at renderNodeDestructive (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
      at renderNode (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6274:12)
      at renderHostElement (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5646:3)
      at renderElement (/Users/fabio/Documents/PROGETTI/gateqr-platform/frontend/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5967:5)

  --> GET / 500 149ms

Is this something related to Bun (not fully supported), to Hono or what?
Router works perfectly in the SPA without SSR.

Thanks

[DeluxeOwl]

Did you figure this out?

[lo1tuma]

I had a similar issue. In my case the problem was that npm did not dedupe the @tanstack/react-router dependency from @tanstack/start. So I’ve ended up with two copies of @tanstack/react-router in my node_modules folder. Since StartServer adds the <RouterProvider /> it is not compatible with any useRouter calls that use the other copy of @tanstack/react-router.

You can simple check with npm ls @tanstack/react-router how many copies you have in your node_modules folder.

For me, it solved the issue by deleting the package-lock.json file and just recreating it.