unwilling-turquoise

2nd css link tag added on client

got this really weird behaviour when deploying my tanstack app (doesn't happen locally): page source includes 1 link tag for my css, but when I inspect the HTML through the browser console it shows 2 link tags and the network tab shows it is failing to load the one that is added because it doesn't exist. anyone have any idea what is going on?

15 Replies

unwilling-turquoiseOP•2mo ago

deploy with docker image if that matters

deep-jade•2mo ago

does this help? https://github.com/TanStack/router/issues/4959

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

unwilling-turquoiseOP•2mo ago

going to have a look, looks promising 🫶 don't think it's this unfortunately as it was working before and I didn't change anything really. I already had

@source "../../../../apps/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@source "../../../../apps/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

since I'm working in a monorepo and running an image built locally also works fine, it just happens when deployed or when running the image built in ci figured out the reason, was because I changed my Dockerfile to have

COPY package.json pnpm-lock.yaml turbo.json pnpm-workspace.yaml ./
COPY apps/ apps/
COPY packages/ packages/

COPY package.json pnpm-lock.yaml turbo.json pnpm-workspace.yaml ./
COPY apps/ apps/
COPY packages/ packages/

instead of

COPY . .

COPY . .

not sure what files I was missing exactly to make it work

secure-lavender•2mo ago

Hey @Amos did you find any solution for this? why it was happening as i m facing the same issue

unwilling-turquoiseOP•2mo ago

check my previous message

secure-lavender•2mo ago

that didn't worked for me can you tell me if i need to check anything extra ? the below one is my current snippet for imports

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) source("../");
@import "tailwindcss/preflight.css" layer(base) source("../");
@import "tailwindcss/utilities.css" layer(utilities) source("../");
@import "tw-animate-css";
@import "./font.css";
@import './_variables.scss';                                        
@import './_keyframe-animations.scss';

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) source("../");
@import "tailwindcss/preflight.css" layer(base) source("../");
@import "tailwindcss/utilities.css" layer(utilities) source("../");
@import "tw-animate-css";
@import "./font.css";
@import './_variables.scss';                                        
@import './_keyframe-animations.scss';

for my globals.css (src/styles/globals.css) i am importing this in root as import appCss from "../styles/globals.css?url";

unwilling-turquoiseOP•2mo ago

I don't know, I'm using it in a monorepo so it's different for me 🤷‍♂️ this is what I have in my css file

@import "tailwindcss" source("../../../../");
@source "../../../../apps/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@import "tailwindcss" source("../../../../");
@source "../../../../apps/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

but I think the source("../../../../") isn't even needed

narrow-beige•5w ago

Also dealing with this, causes the css to flicker unstyled on my site: https://ui.doras.to/ and there are two CSS files, one which 404s (no idea where it's coming from). Repo: https://github.com/dorasto/ui

deep-jade•5w ago

so the above does not solve your issue?

narrow-beige•5w ago

I believe I've done what's asked and yeah, still occurring :/ I created a new thread in case it's a different problem. Code is fully open and quite minimal Believe I fixed it (docker build locally right now), as I don't have the "/app" dir everything is just within src, so I updated my tailwind to:

// src/styles.css
@import "tailwindcss" source("../src");

// src/styles.css
@import "tailwindcss" source("../src");

Can confirm that done it 🤌

deep-jade•5w ago

would you be able to share a complete project that reproduces this for future users that encounter similar things ?

narrow-beige•5w ago

Sure Here you go: https://stackblitz.com/~/github.com/tommerty/tailwind-source-example Just a basic start from the CLI and updated the styles.css file, updated the homepage with my findings and linked to my real world example repo & site Also improved the README too so you don't need to build in stackblitz to read 😅 Hope this helps 🙇🏻‍♂️

deep-jade•3w ago

@Tommerty this is the same issue, right? https://github.com/TanStack/router/issues/5812

GitHub

Build Hash For css not match when build using docker · Issue #581...

Which project does this relate to? Router Describe the bug Issue When building a TanStack Start project normally (local build), the asset hashes are consistent and everything works as expected. How...

narrow-beige•2w ago

Yep! Looks identical I think calling it a tailwind issue isn't entirely fair as I've never experienced this on next or react router, but I'm also not sure what's "different" in how they're handling it, or if maybe the config just "knows better" I'm off to bed but feel free to share my findings/readme. I'll take a gander in the morning and post something if you don't get to it

adverse-sapphire•2w ago

Thank you very much for the solution! I tried

// src/styles.css
@import “tailwindcss” source(“../”);

// src/styles.css
@import “tailwindcss” source(“../”);

but it didn't work with the docker image! Your solution works perfectly!

Gaming

Programming

2nd css link tag added on client

Did you find this page helpful?