playwright component test mount failed with vite error: how to fix

TL;DR

playwright-ct builds the test bundle with its own Vite config, which drifts from the app's Vite config. Align the two: copy the needed plugins and resolve aliases into the ct config, clear the Vite cache, and re-run. The mount then builds and the component renders.

Error

playwright component test mount failed with vite error: how to fix

Component test mount fails with a Vite build error (unresolvable import or transform failure) before rendering.

Steps

1. Read the Vite error: it usually names a missing plugin, an unresolvable import, or a transform failure. Expected output: you know which config piece is missing.
2. Open the Playwright ct config and compare its vite section against the app's vite config plugin by plugin. Expected output: a diff showing what the ct config lacks.
3. Add the missing plugins and aliases to the ct config's vite section. Expected output: the configs agree on how to build the component.
4. Clear the Vite cache and any Playwright ct build cache, then re-run. Expected output: a fresh build with the corrected config.
5. Mount a minimal component to confirm the pipeline works before returning to the real one. Expected output: the trivial mount passes.

When to use

• Component test mount fails with a Vite error.
• The app builds but ct does not.
• Adding a new Vite plugin broke ct.

When not to use

• The component throws at runtime (the bundle built fine; debug the component).
• E2E Playwright tests fail (ct config is irrelevant there).
• The error is from the test runner, not Vite.

Variant phrasings

JSX transform errors in ct

The ct config needs the same JSX plugin settings as the app; a missing react plugin is the usual cause.

CSS import failures

CSS handling plugins or modules config missing from ct; mirror the app's CSS setup.

HMR port conflicts

The ct dev server can clash with the app's dev server port; set an explicit port in the ct config.

Why it happens

Component testing compiles your components with Vite separately from the app build. The ct config is a second build config that must mirror the app's plugins, aliases, and transforms; when the app config evolves and the ct config does not, the mount build breaks.

Edge cases

• Vite caches aggressively; a config fix that 'does nothing' usually needs the cache cleared.
• Some plugins are dev-server-only and break the ct build; gate them by mode or command.
• Monorepo aliases resolved relative to the app root can misresolve from the ct config's location; use absolute paths.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstCvSqACjfRVXuCZPf1rg0A