Build Hash For css not match when build using docker
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
- Go to this repository - https://github.com/killallskywalker/tanstack-reproduce-issue
- Run
docker compose up - 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 -
Local Build -
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 .
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 🙏
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 :)
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.
I hope it gets resolved soon
what should be resolved here? this seems to be a tailwind issue at best
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.
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
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 .
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("../");
This is an issue if you're just using CSS modules and not using Tailwind at all, correct?
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 )
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!!!!!
if you not using docker , it work great no issue at all
For me it happens without using docker as well.