In vite react-ssr app, When I import StaticRouter component and other components like Link from react-router-dom package, I get this error saying,

SyntaxError: [vite] Named export 'StaticRouter' not found. The requested module 'react-router-dom' is a CommonJS module, which may not support all module.exports as named exports.

You can fix this by simply using react-router package instead of react-router-dom.

Files

src/entry-server.tsx

import { StrictMode } from "react";
import { renderToString } from "react-dom/server";
import { StaticRouter } from "react-router";
import Router from "./Router";

export function render(url: string) {
  const html = renderToString(
    <StrictMode>
      <StaticRouter location={url}>
        <Router />
      </StaticRouter>
    </StrictMode>
  );
  return { html };
}

src/entry-client.tsx

import { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { BrowserRouter } from "react-router";
import Router from "./Router";

hydrateRoot(
  document.getElementById("root") as HTMLElement,
  <StrictMode>
    <BrowserRouter>
      <Router />
    </BrowserRouter>
  </StrictMode>
);

src/Router.tsx

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

import CategoriesPage from "./pages/CategoriesPage";
import HomePage from "./pages/HomePage";
import NotFound from "./pages/NotFound";

function Router() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/categories" element={<CategoriesPage />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

export default Router;