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

Not specified by the original author.

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

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

Thread query: 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.

Not specified by the original author.

TL;DR

Cypress component testing boots your real dev server, so a bad devServer config kills the run before any spec executes. Match the framework and bundler in cypress.config.js, install the matching dev-server package, and make sure the port is free.

Error

CypressError: Component Testing failed to start the dev server.

We tried to start your dev server with the configured framework and bundler,
but it exited unexpectedly. Check the dev server output above for the real error.

Steps

1. Open cypress.config.js and check the component.devServer block matches your stack:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
  },
})

Expected: framework names your UI library and bundler names your build tool.

2. Install the dev-server package Cypress needs for that bundler, for example the Cypress vite dev server package for vite projects. Expected: the package appears in package.json devDependencies.
3. Start your dev server by hand with the same command your project uses. Expected: it boots without errors, which rules out a broken app config.
4. Check nothing else is on the dev server port, and that the port is not hard-coded differently in two places. Expected: the port is free and configured in exactly one place.
5. Run npx cypress open --component again. Expected: the dev server starts and specs mount.

When to use

• Component testing dies before any spec runs
• The failure started after switching bundlers or frameworks
• A teammate's checkout works but yours does not

When not to use

• Specs run but assertions fail (a test problem, not a dev-server problem)
• E2E tests cannot reach the app (see the ECONNREFUSED fix instead)
• The bundler itself fails to build outside Cypress (fix the app config first)

Tool compatibility

• Cypress 12 through 14 component testing
• React, Vue, Angular, and Svelte with vite or webpack dev servers
• The matching Cypress dev-server package for your bundler

Variant phrasings

Cypress component testing dev server exited unexpectedly

Read the dev server output above the Cypress error. The real cause, usually a bad import or a port clash, prints there.

Vite dev server fails to start under Cypress

Confirm the vite config Cypress picks up is the same one npm run dev uses. A second config file is a common culprit.

Why it happens

Cypress does not bundle your components itself. It shells out to your framework's dev server through a small adapter package. If the adapter is missing, the framework name is wrong, or the underlying dev server cannot boot, Cypress reports the failure as its own startup error.

Edge cases

• Works with npm run dev but not under Cypress: Cypress may resolve a different config file. Point devServer at the right one explicitly.
• Port already in use by a zombie process: kill it or set a different port in one place.
• Monorepo: the dev server must start with the package's own config, not the repo root's.

Provenance

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

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

Thread query: cypress component testing failed to start dev server

TL;DR: Cypress component testing boots your real dev server, so a bad devServer config kills the run before any spec executes. Match the framework and bundler in cypress.config.js, install the matching dev-server package, and make sure the port is free.

Not specified by the original author.

TL;DR

Vitest browser mode needs two separate installs: the provider package @vitest/browser-playwright and the Playwright browser binaries. Most startup failures are one of those missing, or the config naming a provider that isnt installed. Install both, confirm the config import, then rerun.

Error

Error: Failed to start browser provider "playwright". Make sure the provider package is installed and the browser binaries are present.

Steps

1. Run npm ls @vitest/browser-playwright (or the pnpm/yarn equivalent) to confirm the provider package is installed. Expected: a version number is listed, not "empty" or "missing".
2. If it is missing, install it: npm install -D @vitest/browser-playwright. Expected: the install completes with no errors.
3. Install the browser binaries: npx playwright install chromium (swap in firefox or webkit to match your instances config). Expected: the download finishes and reports a browser path.
4. Open vitest.config and confirm the browser block imports the provider (provider: playwright() from @vitest/browser-playwright) and sets browser.enabled to true. Expected: the config loads with no import errors when vitest starts.
5. Run npx vitest --browser --browser.headless on a single test file. Expected: the browser launches and the test runs, so you see a pass or a test failure instead of a provider startup error.

When to use

• Vitest with browser mode enabled fails before any test runs, and the error names the playwright provider.
• You just turned on browser mode and never installed the browser binaries.
• CI fails on provider startup while local runs work (binaries not cached in CI).

When not to use

• Tests start but fail inside the browser (page errors, assertion failures); the provider already started fine.
• You use the webdriverio or preview provider; the package names and install steps differ.
• Plain vitest in node or jsdom fails; browser mode is not involved.

Tool compatibility

• Vitest 2.x and 3.x, with @vitest/browser-playwright on the same major version as Vitest.
• Playwright 1.4x and newer; chromium, firefox, and webkit browser instances.

Variant phrasings

browser provider failed to initialize

Same startup phase, different wording. The checklist is identical: provider package installed, binaries present, config import correct.

Playwright browser not found when running vitest --browser

The binaries step is the fix. On Linux CI add system deps with npx playwright install --with-deps chromium so the browser can actually launch.

vitest browser mode worked yesterday and broke today

Suspect a version bump: Vitest and the provider package must stay on matching majors after upgrades.

Why it happens

Vitest keeps browser support out of the core package, so the provider and the real browser binaries are separate installs. If either is missing, or the config names a provider whose package isnt installed, startup dies before the first test file loads.

Edge cases

• Version skew between vitest and @vitest/browser-playwright produces cryptic startup errors; pin both to the same major.
• On Linux CI, browsers need OS libraries; the --with-deps flag pulls them in.
• Running as root in Docker: Chromium refuses to start without sandbox-disabling launch args, which go in the browser.instances launch options.

Provenance

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

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

Thread query: vitest browser mode failed to start playwright provider

TL;DR: Vitest browser mode needs two separate installs: the provider package @vitest/browser-playwright and the Playwright browser binaries. Most startup failures are one of those missing, or the config naming a provider that isnt installed. Install both, confirm the config import, then rerun.