{"id":16330,"library":"cypress-rspack-dev-server","title":"Cypress Rspack Dev Server","description":"cypress-rspack-dev-server is a Cypress component testing dev server that integrates with Rspack, providing a fast and efficient build toolchain for testing front-end components. It allows developers to leverage Rspack's performance benefits within their Cypress test environment, handling asset compilation and serving for component tests. The current stable version is 1.1.2, though release candidates for 2.0.0 supporting Rspack 2 are actively being developed. The package's release cadence appears to align with major updates to Rspack and Cypress itself, indicating a responsive maintenance schedule rather than fixed intervals. Its primary differentiator is the direct integration with Rspack, offering an alternative to webpack-based dev servers for users already committed to the Rspack ecosystem.","status":"active","version":"1.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/th3fallen/cypress-rspack-dev-server","tags":["javascript","rspack","cypress","dev-server","component test","typescript"],"install":[{"cmd":"npm install cypress-rspack-dev-server","lang":"bash","label":"npm"},{"cmd":"yarn add cypress-rspack-dev-server","lang":"bash","label":"yarn"},{"cmd":"pnpm add cypress-rspack-dev-server","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Cypress component testing integration.","package":"cypress","optional":false},{"reason":"Core Rspack functionality for bundling assets.","package":"@rspack/core","optional":false}],"imports":[{"note":"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.","wrong":"const createRspackDevServer = require('@cypress/rspack-dev-server').createRspackDevServer","symbol":"createRspackDevServer","correct":"import { createRspackDevServer } from '@cypress/rspack-dev-server'"},{"note":"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`.","symbol":"RspackConfig","correct":"import type { RspackOptions } from '@rspack/core';\nimport type { CypressRspackDevServerConfig } from '@cypress/rspack-dev-server';"},{"note":"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.","symbol":"devServer","correct":"import { defineConfig } from 'cypress';\nimport { createRspackDevServer } from '@cypress/rspack-dev-server';\n\nexport default defineConfig({\n  component: {\n    devServer: createRspackDevServer,\n  },\n});"}],"quickstart":{"code":"import { defineConfig } from 'cypress';\nimport { createRspackDevServer } from '@cypress/rspack-dev-server';\nimport { Configuration as RspackConfiguration } from '@rspack/core';\n\nconst rspackConfig: RspackConfiguration = {\n  // Your Rspack configuration for component testing\n  mode: 'development',\n  resolve: {\n    extensions: ['.js', '.ts', '.jsx', '.tsx'],\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.(js|ts|jsx|tsx)$/,\n        exclude: /node_modules/,\n        loader: 'builtin:swc-loader',\n        options: {\n          jsc: {\n            parser: {\n              syntax: 'typescript',\n              jsx: true,\n            },\n            transform: {\n              react: {\n                runtime: 'automatic',\n              },\n            },\n          },\n        },\n      },\n    ],\n  },\n  // Add any other Rspack specific configurations here\n};\n\nexport default defineConfig({\n  component: {\n    devServer: {\n      framework: 'react',\n      bundler: 'rspack',\n      rspackConfig,\n    },\n    devServer: createRspackDevServer,\n    specPattern: '**/*.cy.{js,jsx,ts,tsx}',\n  },\n  e2e: {\n    setupNodeEvents(on, config) {\n      // implement node event listeners here\n    },\n  },\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Review Rspack 2 migration guides for `@rspack/core` and update your `rspackConfig` object accordingly. Test your component tests thoroughly after upgrading.","message":"Version 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.","severity":"breaking","affected_versions":">=2.0.0-rc.1"},{"fix":"Upgrade 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.","message":"When 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.","severity":"gotcha","affected_versions":"<1.1.2"},{"fix":"Upgrade to version 1.1.0 or newer to ensure proper resolution paths, especially if your Rspack configuration lives outside the project root.","message":"Incorrect resolution of component index files when the Rspack configuration is located in a subdirectory was an issue in earlier versions.","severity":"gotcha","affected_versions":"<1.1.0"},{"fix":"Ensure 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.","message":"Cypress 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.","severity":"breaking","affected_versions":">=1.0.0 (Cypress v10+)"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure 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.","cause":"The package is not installed or incorrectly referenced in `cypress.config.ts`.","error":"Error: Cannot find module '@cypress/rspack-dev-server'"},{"fix":"In 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 }`.","cause":"The `rspackConfig` property is missing or malformed in the `devServer` options passed to `createRspackDevServer`.","error":"TypeError: Cannot read properties of undefined (reading 'rspackConfig')"},{"fix":"Review 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.","cause":"Your Rspack configuration's `resolve` or `module.rules` settings are not correctly configured to find your component files or their dependencies.","error":"Error: Rspack compilation failed: Module not found: Error: Can't resolve './src/App'"}],"ecosystem":"npm"}