cypress-vite-preprocessor

1.0.1 verified Mon Apr 27 auth: no javascript

A Cypress preprocessor that uses Vite to bundle JavaScript test files. The current version is 1.0.1, released with a low cadence (no major changes yet). It requires Cypress ^10.3.1, Rollup ^2.77.0, and Vite ^3.0.2. Unlike alternatives (e.g., cypress-webpack-preprocessor, cypress-esbuild-preprocessor), this leverages Vite's fast bundling and native ESM support, but has limited configuration and is tied to specific peer dependency versions. It outputs CommonJS for Cypress compatibility.

Common errors

error Cannot find module 'cypress-vite-preprocessor' ↓

cause Package not installed or missing from node_modules.

fix

Run: npm install cypress-vite-preprocessor --save-dev

error Error: The module factory of `cypress-vite-preprocessor` cannot handle the requested file type. ↓

cause Vite configuration does not support the file extension (e.g., .vue).

fix

Provide a custom Vite config with the appropriate plugin.

error TypeError: createVitePreprocessor is not a function ↓

cause Incorrect import: using default import instead of destructured.

fix

Use 'const { createVitePreprocessor } = require('cypress-vite-preprocessor')'.

Warnings

deprecated Package has not been updated in over a year; consider using Cypress's built-in Vite support (experimentalStudio) or other maintained preprocessors. ↓

fix Migrate to @cypress/vite-dev-server and cypress-vite if using Cypress 10+.

breaking Requires Vite 3 (^3.0.2) and Rollup 2 (^2.77.0); incompatible with Vite 4+ or Rollup 3+. ↓

fix Pin Vite to 3.x and Rollup to 2.x, or use a different preprocessor.

gotcha CommonJS-only; ESM imports may cause runtime errors in Cypress plugins file. ↓

fix Use require() instead of import in Cypress configuration.

breaking Requires Node.js >=18; older Node versions not supported. ↓

fix Upgrade Node.js to 18 or newer.

Install

npm install cypress-vite-preprocessor

yarn add cypress-vite-preprocessor

pnpm add cypress-vite-preprocessor

Imports

createVitePreprocessor

wrong

import { createVitePreprocessor } from 'cypress-vite-preprocessor';

correct

const { createVitePreprocessor } = require('cypress-vite-preprocessor');

This package exports CommonJS; ESM import may fail. Use require() in Cypress plugins file.

default import

wrong

const createVitePreprocessor = require('cypress-vite-preprocessor'); // this returns the object, not the function

correct

const createVitePreprocessor = require('cypress-vite-preprocessor').createVitePreprocessor;

The package exports an object, not a default function.

Quickstart

Configures Cypress to use Vite as the file preprocessor for bundling test files.

// cypress/plugins/index.ts
const { createVitePreprocessor } = require('cypress-vite-preprocessor');

module.exports = (on) => {
  on('file:preprocessor', createVitePreprocessor());
};