router icon indicating copy to clipboard operation
router copied to clipboard

Build Hash For css not match when build using docker

Open killallskywalker opened this issue 1 month ago • 12 comments

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.

However, when building the same project inside a Docker container, there’s a mismatch in the hashed style assets. This causes a Flash of Unstyled Content (FOUC) on page load.

Your Example Website or App

https://github.com/killallskywalker/tanstack-reproduce-issue

Steps to Reproduce the Bug or Issue

  1. Go to this repository - https://github.com/killallskywalker/tanstack-reproduce-issue
  2. Run docker compose up
  3. Open localhost:3000 then you can see the mismatch and the FOUC

However , if you do this 1 . npm run build 2 . node .output/server/index.mjs 3 . Open localhost:3000 then you can see all work nicely

Expected behavior

The asset hashes and generated style files should be identical regardless of build environment (local vs Docker) and no FOUC

Screenshots or Videos

Docker Image -

Image

Local Build -

Image

Platform

  • Router / Start Version: [1.135.0]
  • Bundler: [vite]
  • Bundler Version: [7.2.2]
  • Nitro V2 Plugin [1.133.19]

Additional context

Step to reproduce also attach in readme of repo .

killallskywalker avatar Nov 10 '25 23:11 killallskywalker

I also have this problem, glad you made a repro for this. There are potential solutions for this in this issue but they don't work for me. Hoping to get a full fix soon 🙏

AlanMorel avatar Nov 11 '25 18:11 AlanMorel

Try changing your style.css's first line like this:

@import 'tailwindcss' source("./");

This is what worked for me and I see you have the same folder structure. Hope this helps :)

dulev avatar Nov 11 '25 23:11 dulev

Hey, @dulev thank you very much for your comment. The solution you mentioned worked for me. I hope it gets resolved soon so we don't have to get to this point, haha.

TheHypnoo avatar Nov 12 '25 02:11 TheHypnoo

I hope it gets resolved soon

what should be resolved here? this seems to be a tailwind issue at best

schiller-manuel avatar Nov 12 '25 22:11 schiller-manuel

I hope it gets resolved soon

what should be resolved here? this seems to be a tailwind issue at best

I didn't say it was a problem with tanstack, I only said, “I hope it gets resolved soon.” I racked my brains trying to figure out why it was happening, until I stumbled upon this issue by chance.

TheHypnoo avatar Nov 13 '25 01:11 TheHypnoo

I hope it gets resolved soon

what should be resolved here? this seems to be a tailwind issue at best

Just out of curiosity, why is this a tailwind issue? I would assume the generation of different/multiple hashes would fall under Tanstack/Vite's domain. The fact that it works fine on dev but not when deployed further seems to imply the issue is within Tanstack/Vite, since why would Tailwind be concerned about what env it is running on? Happy to hear your insight on this

AlanMorel avatar Nov 13 '25 15:11 AlanMorel

Hi @dulev , yes it work! thanks . On top of that , im also think like @AlanMorel where the generation of different/multiple hashed would fall under Tanstack/Vite's domain . To add on , if you not using docker , it work great no issue at all . this thing only happen when you using docker .

killallskywalker avatar Nov 14 '25 01:11 killallskywalker

I want to say that this used to work fine, it only broke for me when upgrading from 1.121.0 to 1.136.0 and Vite from 6.4 to 7.2. Probably more likely to be a Vite+Tailwind problem than a Tanstack problem tho.

This fix also works for me. (you need ../ if your app.css is in src/styles)

@import 'tailwindcss' source("../");

graup avatar Nov 21 '25 15:11 graup

This is an issue if you're just using CSS modules and not using Tailwind at all, correct?

onlywei avatar Nov 21 '25 16:11 onlywei

Dont think so, the issue is back after bumping deps to latest, now it also does with assets ( images for example ), specially in CI, I have no clue where the problem is, but it seems like the server build drifts from the client. Client side it can fetch the assets correctly. But when it does SSR -> Client then it fails. the SSR manifest somehow produces different results :s

Just not sure why this happens on CI and not locally ( which makes it really hard to debug )

nikuscs avatar Dec 02 '25 18:12 nikuscs

Try changing your style.css's first line like this:

@import 'tailwindcss' source("./");

This is what worked for me and I see you have the same folder structure. Hope this helps :)

Bro @dulev thank you so much!!!!!

WilsonAlmonte avatar Dec 08 '25 16:12 WilsonAlmonte

if you not using docker , it work great no issue at all

For me it happens without using docker as well.

emincangencer avatar Dec 11 '25 02:12 emincangencer