Cannot make SSR works

[cathaysia]

Due to my app is create by CRA, so the index.html has no content inside it, react will render components after the browser load it. So I want prerendering the index.html for better user experience.

I'm following this tutorial, and then get a entry_server.tsx like this:

import { DragDropContext } from '@hello-pangea/dnd';
import { QueryClientProvider } from '@tanstack/react-query';
import { createMemoryHistory } from '@tanstack/react-router';
import { StartServer } from '@tanstack/start/server';
import { ThemeProvider } from 'next-themes';
import React from 'react';
// biome-ignore lint/style/useNamingConvention: ignore
import ReactDOMServer from 'react-dom/server';
import { queryClient } from './lib/query.js';
import { createRouter } from './router';

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

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

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

  await router.load();

  return ReactDOMServer.renderToString(
    <ThemeProvider
      defaultTheme="dark"
      storageKey="vite-ui-theme"
      attribute="class"
    >
      <DragDropContext
        onDragEnd={() => {
          console.log('drag end');
        }}
      >
        <QueryClientProvider client={queryClient}>
          <StartServer
            router={
              // biome-ignore lint/suspicious/noExplicitAny: ignore
              router as any
            }
          />
        </QueryClientProvider>
      </DragDropContext>
    </ThemeProvider>,
  );
}

const index = await render('/');
console.log(index);

Then I call the following commands to render this page:

pn vite build --ssr src/entry_server.tsx --outDir dist/server --target=node20
node dist/server/entry_server.js

but I get some errors:

Warning: useRouter must be used inside a <RouterProvider> component!
Warning: useRouter must be used inside a <RouterProvider> component!
file:///home/tea/finalgit/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/useRouterState.js:7
  return useStore(((opts == null ? void 0 : opts.router) || contextRouter).__store, opts == null ? void 0 : opts.select);
                                                                           ^

TypeError: Cannot read properties of null (reading '__store')
    at useRouterState (file:///home/tea/finalgit/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/useRouterState.js:7:76)
    at OutletImpl (file:///home/tea/finalgit/node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected][email protected]/node_modules/@tanstack/react-router/dist/esm/Match.js:161:19)
    at renderWithHooks (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5736:15)
    at renderElement (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5961:7)
    at renderMemo (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5883:3)
    at renderElement (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6026:11)
    at renderNodeDestructiveImpl (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6119:11)
    at renderNodeDestructive (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6091:14)
    at renderNode (/home/tea/finalgit/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6274:12)

Node.js v20.17.0

I try add 'use client' for my page, but it does not work. And this script will throw error when there is a <Outlet/> inside __root.tsx.

here is my __root.tsx:

import { Outlet, createRootRoute } from '@tanstack/react-router';
import * as React from 'react';

import '@/app/global.css';
import '@/locales';
export const Route = createRootRoute({
  component: () => (
    <React.Fragment>
      <Outlet />
    </React.Fragment>
  ),
});

and the index.tsx:

import { Navigate, createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
  component: Index,
});

function Index() {
  return <></>;
}

How can I solve this?