#Can I use CSS modules with React Router 7 and SSR: false?

1 messages · Page 1 of 1 (latest)

placid linden
#

Hey,

I've got a project using RR7 with ssr: false. . I'm also trying to use CSS modules, but even though they're being bundled in the build process, they're not being linked in the HTML.

It it possible that React Router v7's build process is not automatically including CSS modules in the HTML output when SSR is disabled?

It this expected or maybe an issue?

#

It's definitely bundling them when building, but missing the link in the html, like in this picture. This is being bundled and works when running it locally through npx react-router dev, but it's not present in the html when running react-router build and then npx serve build/client -s -l 8080

image.png
#

I can also confirm the styles are being bundled when building. They're just missing from the HTML

image.png
placid linden
#

The best workaround I have at the moment is this:

  1. To my root.tsx file, I'm adding:
// ... rest of my imports
import cssModules from './import-css-modules'

export const links: Route.LinksFunction = () => [
  // ... other styles
  ...cssModules,
  1. And my import-css-modules.ts file looks like this:
import StyleExample from './components/AIChat/StyleExample/StyleExample.module.scss'

export default [
  { href: StyleExample as unknown as string, rel: 'stylesheet'    }
]

Notice how I'm adding ...as unknown as... in the href, because if I don't I'd get:

Type '{ href: CSSModuleClasses; rel: string; }' is not assignable to type 'LinkDescriptor'.

#

This works, but feel it's more of a hack than an actual solution. Also a bit tedious to be adding every module in this file as I develop my app.

placid linden
#

any thoughts?

placid linden
#

👋