How can I completely disable SSR for styled-components in a React Router Framework project with Vite?

I'm working on a React Router Framework project using Vite and I want to use styled-components in it without server-side rendering (SSR). However, even though I've turned off SSR, I'm getting errors that suggest SSR is still being attempted. Here is a minimal example that reproduces the issue:

app/routes.tsx

TYPESCRIPTCopied
import { type RouteConfig, index } from "@react-router/dev/routes";

export default [index("routes/home.tsx")] satisfies RouteConfig;

app/routes/home.tsx

TYPESCRIPTCopied
import type { Route } from "./+types/home";
import styled from "styled-components";

export function meta({}: Route.MetaArgs) {
  return [
    { title: "New React Router App" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}

const Text = ({className}: {className?: string}) => <div><p className={className}>MY TEXT</p></div>
const StyledText = styled(Text)`
  color: red;
`;

export default function Home() {
  return <main><StyledText /></main>
}

Running this example results in the following error:

Error Log

BASHCopied
[vite] Internal server error: __vite_ssr_import_2__.default is not a function
      at eval (*project-root*/app/routes/home.tsx:34:49)
      at instantiateModule (file:///*project-root*/node_modules/vite/dist/node/chunks/dep-CHZK6zbr.js:52974:5)

I understand that styled-components usually requires special configuration for SSR (https://styled-components.com/docs/advanced#server-side-rendering), but SSR should be disabled here:

react-router.config.ts

TYPESCRIPTCopied
import type { Config } from "@react-router/dev/config";

export default {
  ssr: false,
} satisfies Config;

vite.config.ts

TYPESCRIPTCopied
import { reactRouter } from "@react-router/dev/vite";
import tailwindcss from "@tailwindcss/vite";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  build: {
    cssMinify: true,
    ssr: false,
  }
});

I'm not sure why SSR is still being executed and causing errors with styled-components. I don't want to waste time configuring styled-components for SSR since I'm not planning to use it. Also, I prefer using React Router Framework due to its useful features over React Router Library.

What am I doing wrong, and how can I fully disable SSR in this configuration?