How to use CSS Modules with TanStack Start? #3023

calmqwe · 2024-12-16T20:51:39Z

Which project does this relate to?

Start

Describe the bug

I'm struggling to make CSS Modules work properly. Currently, the styles are being loaded only on the client, causing a flash of unstyled content (FOUC) during initial render.
I tried in this repo https://github.com/tanstack/router/tree/main/examples/react/start-basic

Your Example Website or App

https://github.com/nikolayemrikh/start-css-modules-bug

Steps to Reproduce the Bug or Issue

Clone repo https://github.com/nikolayemrikh/start-css-modules-bug
Add CSS Modules support by creating a .module.css file and importing it into a React component.
Run the server and open the app in a browser.
Observe that the styles are applied only after the client-side hydration, causing a flash of unstyled content (FOUC).

Expected behavior

I would like to see a working example or documentation on how to properly configure TanStack Router with CSS Modules and SSR.
The desired behavior is to have styles included in the server-rendered HTML, so there is no flash of unstyled content (FOUC).

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

No response

roboncode · 2024-12-21T05:32:09Z

In addition to this. on build, the CSS is not referenced by cloudflare-pages. I also ran a build using the node-server preset and it also has the same behavior.

app.config.ts

export default defineConfig({
  server: {
    preset: 'node-server',
    // preset: 'cloudflare-pages',
    // unenv: cloudflare,
  },
})

client.tsx

import '@shopify/polaris/build/esm/styles.css'
import './client.css'

gioruu · 2024-12-21T10:16:53Z

Having the same flash of unstyled content (FOUC) problem. Waiting for a Messiah.

gioruu · 2024-12-21T10:42:36Z

This worked:

Add a '?url' to the css import:
import CSS from '../app.css?url'
Add this line to the Route object head:
links: [{ rel: 'stylesheet', href: CSS }]

Full code:

import {
   Outlet,
   ScrollRestoration,
   createRootRoute,
} from '@tanstack/react-router'
import { Meta, Scripts } from '@tanstack/start'
import type { ReactNode } from 'react'
import CSS from '../app.css?url'      // this

export const Route = createRootRoute({
   head: () => ({
      meta: [
         {
            charSet: 'utf-8',
         },
         {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1',
         },
         {
            title: 'TanStack Start Starter',
         },
      ],
      links: [{ rel: 'stylesheet', href: CSS }]          // and this
   }),
   component: RootComponent,
})

function RootComponent() {
   return (
      <RootDocument>
         <Outlet />
      </RootDocument>
   )
}

function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
   return (
      <html>
         <head>
            <Meta />
         </head>
         <body>
            {children}
            <ScrollRestoration />
            <Scripts />
         </body>
      </html>
   )
}

"@tanstack/start": "^1.91.3",

roboncode · 2024-12-23T03:30:59Z

Thx @gioruu. I verified this works as well.

j-mcfarlane · 2024-12-23T16:25:53Z

@roboncode are you sure, I cloned this guys repo and I can clearly see both his red and green squares loading without styling and then being hydrated giving the 'flicker' effect.

I am having the same error using pigment css

nikolayemrikh · 2024-12-23T18:44:30Z

@gioruu, your example works because you use the URL directly in the root. However, it doesn't make sense; we need to have the ability to write CSS and place it next to a component using CSS Modules. Neither CSS Modules nor imports work properly within a component.

It works as expected in other frameworks like Next.js.

nikolayemrikh · 2024-12-23T18:45:51Z

@SeanCassiere could you please reopen it? Not everyone use tailwind.

j-mcfarlane · 2024-12-23T18:46:52Z

I agree with @nikolayemrikh

I am trying to implement a monorepo using tanstack start. I was previously using styled-components + vite + tanstack with great success. I am shifting to tanstack start and am getting the FOUC issues on mount

https://github.com/j-mcfarlane/tanstack-start-monorepo/

I believe this is inline with this error nksaraf/vinxi#79

How the FOUC do I fix this

roboncode · 2024-12-24T03:33:30Z

@j-mcfarlane, not sure about his repo but when i added the the ?url it worked for me and it started including it in my build

import { AppProvider } from '@shopify/polaris'
import POLARIS_CSS from '@shopify/polaris/build/esm/styles.css?url'
import enTranslations from '@shopify/polaris/locales/en.json'
import type { ReactNode } from 'react'
import CLIENT_CSS from '../client.css?url'
import { QueryProvider } from '../providers/QueryProvider'

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: 'utf-8',
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1',
      },
      {
        title: 'TanStack Start Starter',
      },
    ],
    links: [
      { rel: 'stylesheet', href: CLIENT_CSS },
      { rel: 'stylesheet', href: POLARIS_CSS },
    ],
  }),
  component: RootComponent,
})

IRlyDontKnow · 2024-12-24T12:47:01Z

@j-mcfarlane, not sure about his repo but when i added the the ?url it worked for me and it started including it in my build

import { AppProvider } from '@shopify/polaris'
import POLARIS_CSS from '@shopify/polaris/build/esm/styles.css?url'
import enTranslations from '@shopify/polaris/locales/en.json'
import type { ReactNode } from 'react'
import CLIENT_CSS from '../client.css?url'
import { QueryProvider } from '../providers/QueryProvider'

export const Route = createRootRoute({
head: () => ({
meta: [
{
charSet: 'utf-8',
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
title: 'TanStack Start Starter',
},
],
links: [
{ rel: 'stylesheet', href: CLIENT_CSS },
{ rel: 'stylesheet', href: POLARIS_CSS },
],
}),
component: RootComponent,
})

That's because you're not using CSS Modules in your example ;)

TheOrdinaryWow · 2024-12-26T08:08:27Z

Got similar issues using TailwindCSS 4.0 with TSS as well.

update: now there's a new issue related to that. #2899

joakimgrr · 2024-12-26T10:39:08Z

Just tried @gioruu 's solution above while setting up Tailwind with TanStack Start and I got some weird issues with it. I then realized that I had a rogue service worker running in that address (using the same port 3000 for a lot of local development stuff). After i de-registered it the issues went away and worked as expected.

Probably a edge case for many, but thought I'd mention if this saves some headache from someone in the future 👍

richhost · 2024-12-28T06:05:33Z

I got a hydration error after running pnpm start following a build.

import tailwind from "~/styles/tailwind.css?url";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start Starter",
      },
    ],
    links: [{ rel: "stylesheet", href: tailwind }],
  }),
  component: RootComponent,
});

"tailwindcss": "4.0.0-beta.8",
"@tanstack/react-router": "^1.92.6",
"@tanstack/start": "^1.92.6",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"vinxi": "^0.5.1"

ra8ga · 2025-01-03T07:47:29Z

I have same issue, is anyone can help? 🫣

nikolayemrikh mentioned this issue Dec 18, 2024

CSS Not in Initial Document for Prod Builds (Waterfalls) nksaraf/vinxi#79

Closed

SeanCassiere added has workaround A solution has been provided. start Everything about TanStack Start labels Dec 21, 2024

SeanCassiere closed this as not planned Won't fix, can't repro, duplicate, stale Dec 21, 2024

SeanCassiere removed the has workaround A solution has been provided. label Dec 23, 2024

SeanCassiere reopened this Dec 23, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to use CSS Modules with TanStack Start? #3023

How to use CSS Modules with TanStack Start? #3023

calmqwe commented Dec 16, 2024 •

edited

Loading

roboncode commented Dec 21, 2024

gioruu commented Dec 21, 2024

gioruu commented Dec 21, 2024 •

edited

Loading

roboncode commented Dec 23, 2024

j-mcfarlane commented Dec 23, 2024

nikolayemrikh commented Dec 23, 2024 •

edited

Loading

nikolayemrikh commented Dec 23, 2024

j-mcfarlane commented Dec 23, 2024 •

edited

Loading

roboncode commented Dec 24, 2024

IRlyDontKnow commented Dec 24, 2024

TheOrdinaryWow commented Dec 26, 2024 •

edited

Loading

joakimgrr commented Dec 26, 2024 •

edited

Loading

richhost commented Dec 28, 2024 •

edited

Loading

ra8ga commented Jan 3, 2025

How to use CSS Modules with TanStack Start? #3023

How to use CSS Modules with TanStack Start? #3023

Comments

calmqwe commented Dec 16, 2024 • edited Loading

Which project does this relate to?

Describe the bug

Your Example Website or App

Steps to Reproduce the Bug or Issue

Expected behavior

Screenshots or Videos

Platform

Additional context

roboncode commented Dec 21, 2024

gioruu commented Dec 21, 2024

gioruu commented Dec 21, 2024 • edited Loading

roboncode commented Dec 23, 2024

j-mcfarlane commented Dec 23, 2024

nikolayemrikh commented Dec 23, 2024 • edited Loading

nikolayemrikh commented Dec 23, 2024

j-mcfarlane commented Dec 23, 2024 • edited Loading

roboncode commented Dec 24, 2024

IRlyDontKnow commented Dec 24, 2024

TheOrdinaryWow commented Dec 26, 2024 • edited Loading

joakimgrr commented Dec 26, 2024 • edited Loading

richhost commented Dec 28, 2024 • edited Loading

ra8ga commented Jan 3, 2025

calmqwe commented Dec 16, 2024 •

edited

Loading

gioruu commented Dec 21, 2024 •

edited

Loading

nikolayemrikh commented Dec 23, 2024 •

edited

Loading

j-mcfarlane commented Dec 23, 2024 •

edited

Loading

TheOrdinaryWow commented Dec 26, 2024 •

edited

Loading

joakimgrr commented Dec 26, 2024 •

edited

Loading

richhost commented Dec 28, 2024 •

edited

Loading