correct-apricot

Flash of unstyled content (FOUC) issue

I've been trying to fix this FOUC unsuccesfully. Vite config:

export default defineConfig(() => ({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({
      srcDirectory: "src",
    }),
    nitroV2Plugin({ preset: "node-server" }),
    viteReact(),
    tailwindcss(),
  ],
}));

export default defineConfig(() => ({
  server: {
    port: 3000,
  },
  plugins: [
    tsConfigPaths({
      projects: ["./tsconfig.json"],
    }),
    tanstackStart({
      srcDirectory: "src",
    }),
    nitroV2Plugin({ preset: "node-server" }),
    viteReact(),
    tailwindcss(),
  ],
}));

__root.tsx

import appCss from "~/styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        name: "color-scheme",
        content: "light dark",
      },
    ],
    links: [
      { rel: "stylesheet", href: appCss },
      {
        rel: "apple-touch-icon",
        sizes: "180x180",
        href: "/apple-touch-icon.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "32x32",
        href: "/favicon-32x32.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "16x16",
        href: "/favicon-16x16.png",
      },
      { rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
      { rel: "icon", href: "/favicon.ico" },
    ],
  }),
  errorComponent: DefaultCatchBoundary,
  notFoundComponent: () => <NotFound />,
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <HeroUIProvider>
          <main className="text-foreground bg-background">{children}</main>
          <TanStackRouterDevtools position="bottom-right" />
        </HeroUIProvider>
        <Scripts />
      </body>
    </html>
  );
}

import appCss from "~/styles/app.css?url";

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        name: "color-scheme",
        content: "light dark",
      },
    ],
    links: [
      { rel: "stylesheet", href: appCss },
      {
        rel: "apple-touch-icon",
        sizes: "180x180",
        href: "/apple-touch-icon.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "32x32",
        href: "/favicon-32x32.png",
      },
      {
        rel: "icon",
        type: "image/png",
        sizes: "16x16",
        href: "/favicon-16x16.png",
      },
      { rel: "manifest", href: "/site.webmanifest", color: "#fffff" },
      { rel: "icon", href: "/favicon.ico" },
    ],
  }),
  errorComponent: DefaultCatchBoundary,
  notFoundComponent: () => <NotFound />,
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <HeadContent />
      </head>
      <body>
        <HeroUIProvider>
          <main className="text-foreground bg-background">{children}</main>
          <TanStackRouterDevtools position="bottom-right" />
        </HeroUIProvider>
        <Scripts />
      </body>
    </html>
  );
}

tanstack react router/start are all version ^1.132.37 I also followed this github issue and can't find any solutions unfortunately. https://github.com/TanStack/router/issues/3023

GitHub

How to use CSS Modules with TanStack Start? · Issue #3023 · TanSt...

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 unstyle...

9 Replies

correct-apricotOP•2mo ago

app.css:

@import "tailwindcss";
@config "../../tailwind.config.mjs";

@import "tailwindcss";
@config "../../tailwind.config.mjs";

correct-apricotOP•2mo ago

I noticed the initial html will reference the invalid stylesheet <link rel="stylesheet" href="/assets/app-D_qkI4jN.css"/> so thats the first invalid request 404

fascinating-indigo•2mo ago

why do you still have a js tailwind config

correct-apricotOP•2mo ago

eh? it seems i misread the heroui docs. let me fix that

fascinating-indigo•2mo ago

@butts fyi tailwind v4 has no js config anymore, it's all css magic (see @import "tailwindcss") also heroui's doc is outdated in some aspects for example while the framer-motion package still exists, what you should install motion instead framer-motion is an alias for now, but you can never know when this alias will be deleted

correct-apricotOP•2mo ago

@notKamui thanks. I've since removed the tailwind.config.mjs app.css looks like

@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));

Still, the issue persists this part

import appCss from "~/styles/app.css?url";
// omitted

    links: [
      { rel: "stylesheet", href: appCss }, 
// html is still giving         <link rel="stylesheet" href="/assets/app-D_qkI4jN.css"/> << this is not the correct css asset path

import appCss from "~/styles/app.css?url";
// omitted

    links: [
      { rel: "stylesheet", href: appCss }, 
// html is still giving         <link rel="stylesheet" href="/assets/app-D_qkI4jN.css"/> << this is not the correct css asset path

equal-aqua•2mo ago

most likely the css is not available during ssr. check the network tab for 404

equal-aqua•2mo ago

https://github.com/TanStack/router/issues/4959 @import 'tailwindcss' source('../'); resolved it for me

GitHub

Tanstack Start: Asset hash mismatch between client and server-side ...

Which project does this relate to? Start Describe the bug This is a follow up issue from this discussion here: #4952 As described in the title, there is an incorrect CSS asset hash value in the ser...

correct-apricotOP•2mo ago

mate you're a lifesaver! thank you very much 🙂

Gaming

Programming

Flash of unstyled content (FOUC) issue

Did you find this page helpful?