Registry /
testing / cypress-rspack-dev-server
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
createRspackDevServer
✓ import { createRspackDevServer } from '@cypress/rspack-dev-server'
✗ const createRspackDevServer = require('@cypress/rspack-dev-server').createRspackDevServer
This is the main function exported for configuring Cypress component testing with Rspack. The package ships with TypeScript types, so ESM import syntax is preferred.
RspackConfig
✓ import type { RspackOptions } from '@rspack/core';
import type { CypressRspackDevServerConfig } from '@cypress/rspack-dev-server';
While 'RspackConfig' might not be a direct export from this package, it's common to import Rspack configuration types (RspackOptions) from '@rspack/core' for type-checking your `rspackConfig` object. This package exports Cypress-specific types like `CypressRspackDevServerConfig`.
devServer
✓ import { defineConfig } from 'cypress';
import { createRspackDevServer } from '@cypress/rspack-dev-server';
export default defineConfig({
component: {
devServer: createRspackDevServer,
},
});
The `devServer` property in `cypress.config.ts` expects a function reference, which `createRspackDevServer` provides. Do not call the function directly here; Cypress will call it with the appropriate options.
This quickstart demonstrates how to configure Cypress to use `cypress-rspack-dev-server` for component testing with a basic Rspack configuration. It sets up the `devServer` in `cypress.config.ts` to use `createRspackDevServer` and provides a minimal `rspackConfig` object, including SWC loader for TypeScript/JSX.
import { defineConfig } from 'cypress';
import { createRspackDevServer } from '@cypress/rspack-dev-server';
import { Configuration as RspackConfiguration } from '@rspack/core';
const rspackConfig: RspackConfiguration = {
// Your Rspack configuration for component testing
mode: 'development',
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
},
module: {
rules: [
{
test: /\.(js|ts|jsx|tsx)$/,
exclude: /node_modules/,
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
jsx: true,
},
transform: {
react: {
runtime: 'automatic',
},
},
},
},
},
],
},
// Add any other Rspack specific configurations here
};
export default defineConfig({
component: {
devServer: {
framework: 'react',
bundler: 'rspack',
rspackConfig,
},
devServer: createRspackDevServer,
specPattern: '**/*.cy.{js,jsx,ts,tsx}',
},
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
Debug
Known issues
breakingVersion 2.0.0-rc.1 (and subsequent RCs) introduces an upgrade to Rspack 2. This is a significant breaking change as Rspack 2 includes its own breaking changes and potentially requires adjustments to your Rspack configuration.fixReview Rspack 2 migration guides for `@rspack/core` and update your `rspackConfig` object accordingly. Test your component tests thoroughly after upgrading.
affects: >=2.0.0-rc.1
gotchaWhen using interactive mode (e.g., `cypress open`), an issue was reported where `contenthash` in output filenames could lead to 404 errors. This was fixed in 1.1.2.fixUpgrade to version 1.1.2 or newer to ensure correct asset loading in interactive mode. If custom output filenames are used, avoid `[contenthash]` in the `output.filename` option within your Rspack config if experiencing 404s.
affects: <1.1.2
gotchaIncorrect resolution of component index files when the Rspack configuration is located in a subdirectory was an issue in earlier versions.fixUpgrade to version 1.1.0 or newer to ensure proper resolution paths, especially if your Rspack configuration lives outside the project root.
affects: <1.1.0
breakingCypress itself has undergone significant changes in how dev servers are configured, particularly with the introduction of new `devServer` options in `cypress.config.ts`. Older configurations might not be compatible.fixEnsure your `cypress.config.ts` follows the modern Cypress `devServer` configuration pattern, passing an object with `framework`, `bundler`, and `rspackConfig` properties to the `createRspackDevServer` function. Refer to Cypress documentation for component testing `devServer` setup.
affects: >=1.0.0 (Cypress v10+)
Errors
Common errors & fixes
Error: Cannot find module '@cypress/rspack-dev-server'
The package is not installed or incorrectly referenced in `cypress.config.ts`.
fixEnsure the package is installed: `npm install --save-dev @cypress/rspack-dev-server` or `yarn add -D @cypress/rspack-dev-server`. Verify the import path in your Cypress configuration.
TypeError: Cannot read properties of undefined (reading 'rspackConfig')
The `rspackConfig` property is missing or malformed in the `devServer` options passed to `createRspackDevServer`.
fixIn your `cypress.config.ts`, ensure that `createRspackDevServer` is called with an object containing at least `framework`, `bundler`, and a valid `rspackConfig` property, e.g., `{ framework: 'react', bundler: 'rspack', rspackConfig }`. Error: Rspack compilation failed: Module not found: Error: Can't resolve './src/App'
Your Rspack configuration's `resolve` or `module.rules` settings are not correctly configured to find your component files or their dependencies.
fixReview the `rspackConfig` object in your `cypress.config.ts`. Check `resolve.extensions` to ensure it includes all file types your components use (e.g., '.js', '.jsx', '.ts', '.tsx') and `resolve.alias` if you use path aliases. Verify `module.rules` for correct loaders.
Audit
Dependencies
cypressrequiredRequired for Cypress component testing integration.
@rspack/corerequiredCore Rspack functionality for bundling assets.