z.email() shows "Invalid input" in production build - E2E suite gives false green because tests never run against the production bundle

[you-kimono]

First Check

• I added a very descriptive title here.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the documentation, with the integrated search.
• I already searched in Google "How to X" and didn't find any information.
• I already read and followed all the tutorials in the docs and didn't find an answer.

Example Code

Manual reproduction (no test runner needed)

1. `docker compose up`
2. Open `http://localhost:5173/login` in a browser
3. Enter invalidemail in the email field, any value in the password field
4. Click **Log In**
5. Observe: **"Invalid input"** is displayed

Expected: **"Invalid email address"**
The same happens on `/signup` with an invalid or empty email field.

Description

Description

When running the stack with docker compose up and visiting the app at http://localhost:5173, entering an invalid email address in the login or sign-up form and submitting shows "Invalid input" instead of "Invalid email address".

The E2E tests assert "Invalid email address" and currently pass in CI and via docker compose run --rm playwright (this tests a development build, not the production bundle that nginx serves)
The test suite happens to be structured in a way that never exercises the production build, so the failure is invisible there.

Root cause

Zod v4 declares "sideEffects": false in its package.json. Vite's production bundler (Rollup) respects this flag and tree-shakes module-level side effects that have no directly consumed return value.

The English locale, which maps invalid_format: email to the human-readable string "Invalid email address", is registered by a side-effect call in node_modules/zod/v4/classic/external.js:

import { config } from "../core/index.js";
import en from "../locales/en.js";
config(en()); // ← tree-shaken away in production builds

Because sideEffects: false tells the bundler this file is pure, config(en()) is removed from the production bundle.
Without it, error message resolution in node_modules/zod/v4/core/util.js falls through to the hardcoded default:

// util.js, finalizeIssue()
const message =
  unwrapMessage(iss.inst?._zod.def?.error?.(iss)) ??
  unwrapMessage(ctx?.error?.(iss)) ??
  unwrapMessage(config.customError?.(iss)) ??
  unwrapMessage(config.localeError?.(iss)) ?? // undefined (the locale was tree-shaken)
  "Invalid input"; // this is what users see

All other failing tests ("Password is required", "Password must be at least 8 characters", "The passwords don't match") use explicit inline messages in the schema and are unaffected.
z.email() in login.tsx and signup.tsx has no explicit message, so it depends on the locale.

CI and docker compose run --rm playwright give a false green

playwright.config.ts is configured as:

  webServer: {
    command: 'bun run dev',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI,
  },

• CI (CI=true): reuseExistingServer is false, so playwright always starts a fresh bun run dev. Vite dev mode does not bundle or tree-shake (the locale is registered correctly and tests see "Invalid email address"). ✅ false green.
• docker compose run --rm playwright: the playwright container runs in its own network namespace. Nothing listens at localhost:5173 inside the container (the nginx frontend container is a separate container, reachable internally at http://frontend:80, not localhost). reuseExistingServer: true finds no server and falls back to starting bun run dev. ✅ false green.

The only path that hits the production build is running bunx playwright test directly on the host while Docker services are up, because compose.override.yml maps the nginx container's port 80 to the host's port 5173 (5173:80). Playwright then reuses that server (the production bundle) and the real behavior surfaces. ❌ tests fail.

Fix

Add explicit messages to the two z.email() calls. This bypasses the locale system entirely and is consistent with how every other validation message in the project is already written.

frontend/src/routes/login.tsx:

- username: z.email(),
+ username: z.email({ message: "Invalid email address" }),

frontend/src/routes/signup.tsx:

- email: z.email(),
+ email: z.email({ message: "Invalid email address" }),

Broader observation

The E2E test suite currently has no path that runs against the production bundle. Any locale-dependent Zod message or other behavior that differs between vite dev and vite build can regress silently. Running the playwright suite against the nginx container (the artifact that is actually deployed) would close this gap.

Operating System

Linux

Operating System Details

No response

Project Version

33fa827

Python Version

No response

Additional Context

No response

[DaCameraGirl]

Your root cause analysis is spot on. Both issues are real and they compound each other.

Issue 1 — Zod v4 tree-shaking

Zod v4 ships with "sideEffects": false, which tells Vite/Rollup it's safe to drop any import whose result isn't explicitly used. The config(en()) call that registers English error messages is a side effect — nothing in your module graph consumes its return value — so it gets eliminated in production builds. The fallback is Zod's internal default, which is "Invalid input".

Your fix is the right call:

z.email({ message: "Invalid email address" })

Inline messages bypass the locale system entirely and survive tree-shaking. You could also keep a centralized messages object for consistency across the codebase:

// src/utils/validationMessages.ts
export const msg = {
  email: "Invalid email address",
  required: "This field is required",
} as const;

// usage
z.email({ message: msg.email })

Issue 2 — Playwright testing the dev server, not the production bundle

This is a really common gap. In playwright.config.ts, swapping webServer to point at the production Nginx container is the correct long-term fix:

webServer: {
  command: 'docker compose up nginx --wait',
  url: 'http://localhost:80',
  reuseExistingServer: !process.env.CI,
},

On CI you'd want to ensure the production image is built before Playwright runs. A simpler short-term option is adding a separate playwright.prod.config.ts that only runs against the built artifact, keeping the fast dev-server config for local iteration.

Both fixes together eliminate this class of false-green bug entirely — the validation error becomes deterministic regardless of build mode, and the test suite actually exercises what ships to users.

[netopsengineer]

I am happy to open a PR if either of you want to take a look @you-kimono @DaCameraGirl and see if my issue covers yours, I believe this to be something I encountered on master in my most recent project. My fixed branch is here: commit b798137

[you-kimono]

@netopsengineer I do believe they are strictly related. I came up with a very similar solution: commit 61b3c17
It's slightly different from yours and I did my best to keep the change as self-contained as possible.

I would have opened a PR myself, but the guidelines upon opening one explicitely say to wait for a maintainer to ask you to open it.

Even though I do believe this change to be harmless and very much needed, I am inclined to wait for a feedback from the maintainers because it affects the CI pipeline.

[netopsengineer]

@tiangolo @alejsdev thoughts?

[alejsdev]

Hi everyone, thanks for the report and for the patience! This was already covered in #2393