tanstack start + tailwindcss 4 hydration error

[towelong]

Which project does this relate to?

Start

Describe the bug

Local build and previewing is fine, build to docker and running it gives an error

Your Example Website or App

none

Steps to Reproduce the Bug or Issue

please look desc

Expected behavior

Expect the local preview to be the same as in the docker runtime

Screenshots or Videos

No response

Platform

• Router / Start Version: ^1.145.7
• OS: macOS
• Browser: Chrome
• Bundler: vite

Additional context

No response

[towelong]

local preview only 1 css file

[towelong]

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";
import { nitro } from "nitro/vite";

export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    tailwindcss(),
    tsConfigPaths(),
    tanstackStart(),
    nitro({
      preset: "bun",
      compressPublicAssets: { gzip: true, brotli: true },
    }),
    // react's vite plugin must come after start's vite plugin
    viteReact(),
  ],
});

[brenelz]

Do you have more info on your docker setup you could provide?

[schiller-manuel]

please provide a complete minimal reproducer project.

[jmsofarelli]

I am having a similar issue here. Tried to solve it for hours, without success!

When I run locally with bun run preview, it works fine: the browser loads the proper css file.

When I run using a Docker container, the browser tries to load a css asset that doesn't exist (the hash is different than the one in .output/public/assets)

I am running
docker compose build --no-cache
docker compose up -d --force-recreate

vite.config.ts

import { defineConfig } from 'vite'
import { devtools } from '@tanstack/devtools-vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitro } from 'nitro/vite'

const config = defineConfig({
  plugins: [
    devtools(),
    nitro({ preset: 'bun' }),
    // this is the plugin that enables path aliases
    viteTsConfigPaths({
      projects: ['./tsconfig.json'],
    }),
    tailwindcss(),
    tanstackStart(),
    viteReact(),
  ],
  server: {
    allowedHosts: ['26b9c6c72673.ngrok-free.app'],
  },
})

export default config

Dockerfile:

# Stage 1: Builder
FROM oven/bun:1 AS builder
WORKDIR /app
COPY package.json bun.lock ./
RUN bun install --frozen-lockfile
COPY . .
ENV NODE_ENV=production
RUN bun run build

# Stage 2: Runner
FROM oven/bun:1-alpine
WORKDIR /app
ENV NODE_ENV=production
COPY --from=builder /app/.output/server ./server
COPY --from=builder /app/.output/public ./public
COPY --from=builder /app/package.json ./package.json
EXPOSE 3000
CMD ["bun", "run", "server/index.mjs"]

docker-compose.yml:

services:
  app:
    image: my-app:0.1
    container_name: my-app
    build:
      context: .
      dockerfile: Dockerfile
    env_file:
      - .env
    ports:
      - '3000:3000'
    restart: unless-stopped

[jmsofarelli]

Another error that only happens in docker container, probably with the same cause:

Uncaught Error: Minified React error #418; visit https://react.dev/errors/418?args[]=HTML&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.