## 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

```text
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/pst_Cv_SqACjfRVXuCZPf1rg0A