Tanstack Start: Asset hash mismatch between client and server-side (SSR) assets in Dockerfile build

[58bits]

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 server bundle chunk ssr.mjs when attempting to build a Dockerfile image and start the Docker container.

In the Docker container - the entry for appCss in .output/server/chunks/_/ssr.mjs is...

const appCss = "/assets/global-KecCYkUG.css"; - which does NOT exist in the assets directory.

However, in all local builds it is and should be:

const appCss = "/assets/global-DOuTEoU0.css"; - which DOES exist in the assets directory.

(Note: actual hash values have likely changed after attempts at solving this with modified CSS style sheets - but the core problem remains)

Your Example Website or App

https://github.com/Modulus-Learning/registry

Steps to Reproduce the Bug or Issue

pnpm install, pnpm build, pnpm start - to install and run the project locally.

Then build the docker image using the following shell commands from the root of the project:

./_docker/build-prod.sh

And then start the Docker container via:

./_docker/exec-prod.sh up

Visit the docker hosted website on http://localhost (on port 80) and look for console errors in the browser.

NOTE: There is a simplified Dockerfile and instructions in the root of the project that uses npm as opposed to pnpm - although this is there only for diagnostics. The problem is the same whether using the project Dockerfile, in _docker/web/production/Dockerfile or the Dockerfile in the root.

If you'd like to use the Dockerfile in the root - do the following:

docker build --file Dockerfile --tag modulus_registry_test:app-1.0 .

docker compose --project-directory . --file ./docker-compose.yml --project-name modulus-registry-app up

Expected behavior

As a user I expect to be able to load the Docker hosted website without console 404 errors - asset URL not found, and theme and other Web application features should work as expected.

Screenshots or Videos

No response

Platform

• Router / Start Version: ^1.131.11
• OS: Linux/Ubuntu 24 LTS
• Browser: Chrome
• Browser Version: latest
• Bundler: Vite
• Bundler Version: ^7.1.2

Additional context

No response

[58bits]

Note: there have been a few updates to the repo that reproduces this issue - although none that affect the problem we're having. We won't be making any more changes.

For reference, we've tried:

1. Ubuntu base image in Dockerfile builds instead of Alpine
2. All-in-one single stage Dockerfile builds instead of multistage
3. Updated vite.config.ts with diagnostic rollupOptions so that we can see the source base filenames for CSS files.
4. Shell'ing into the running container and updating the entry for const appCss in ssr.mjs (to fix the running container - which works)
5. We've just using npm for the build and run, and the same problem occurs (we've provided a test Dockerfile in the root that uses NPM)
6. 'Regular' and full Tailwind CSS import (i.e. not our reduced import without reset)
7. Several different @source settings in Tailwind CSS

Hope some of this helps.

[ZerNico]

@58bits I think #4606 might fix your problem.

[58bits]

Hi @ZerNico thanks - will try this again however , there are no docs for how to do this when we import Tailwind without the reset layer. Take a look at our imports (sorry typing from my phone so don't have the link to hand)

[58bits]

Hi again @ZerNico - here's what our imports without preflight look like...

https://github.com/Modulus-Learning/registry/blob/main/src/ui/styles/tailwind.css

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities);

@source "../";

Maybe this is a Tailwind issue then - but we've not experienced this in any other framework. Will do a little more digging.

[58bits]

@ZerNico we've also tried @source "../../" and @source "../../../"

[ZerNico]

@58bits try out this in your tailwind.css

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) source(none);
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities) source(none);

@source "../../";

[ZerNico]

Alternatively this should also work

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) source("../../");
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities) source("../../");

[58bits]

@ZerNico - you're a star.

This worked! (in local dev, build, and inside the docker build)

@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme) source("../../");
/* @import "tailwindcss/preflight.css" layer(base); */
@import "tailwindcss/utilities.css" layer(utilities) source("../../");

Thanks you!

[sataycat]

FWIW, here's my config which fixed the issue

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

/* heroui specific */
@plugin './hero.ts';
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));