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

TanStack•6mo ago•

13 replies

broad-emerald

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

Flash of unstyled content (FOUC) issue

Flash of unstyled content (FOUC) issue

Similar Threads

Similar Threads

Similar Threads