cypress-io/cypress · error · Error
Your Cypress devServer config is missing a required webpackC
Error message
Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile} What it means
Thrown by makeWebpackConfig when neither userWebpackConfig nor frameworkWebpackConfig is supplied AND Cypress cannot auto-detect a webpack.config.{js,ts,cjs,...} in the project root. The handler first tries getWebpackConfigFromProjectRoot; if that returns nothing and devServerConfig.onConfigNotFound is undefined, it throws so the user knows a webpackConfig is required. If onConfigNotFound is set (e.g. by the Launchpad) it instead calls that handler and process.exit(0)s.
Source
Thrown at npm/webpack-dev-server/src/makeWebpackConfig.ts:119
if (configFile) {
debug('found webpack config %s', configFile)
const sourcedConfig = await importModule(configFile)
debug('config contains %o', sourcedConfig)
if (sourcedConfig && typeof sourcedConfig === 'object') {
userWebpackConfig = sourcedConfig.default ?? sourcedConfig
}
}
if (!userWebpackConfig) {
debug('could not find webpack.config!')
if (config.devServerConfig?.onConfigNotFound) {
config.devServerConfig.onConfigNotFound('webpack', projectRoot, configFiles)
// The config process will be killed from the parent, but we want to early exit so we don't get
// any additional errors related to not having a config
process.exit(0)
} else {
throw new Error(`Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one.\nPlease add one to your ${config.devServerConfig.cypressConfig.configFile}`)
}
}
}
userWebpackConfig = typeof userWebpackConfig === 'function'
? await userWebpackConfig()
: userWebpackConfig
const userAndFrameworkWebpackConfig = modifyWebpackConfigForCypress(
merge(frameworkWebpackConfig ?? {}, userWebpackConfig ?? {}),
)
debug(`User passed in user and framework webpack config with values %o`, userAndFrameworkWebpackConfig)
debug(`New webpack entries %o`, config.devServerConfig.specs)
debug(`Project root`, projectRoot)
debug(`Support file`, supportFile)
const mergedConfig = merge(View on GitHub (pinned to 0d85fdc912)
Solutions
- Add a `webpackConfig` field to your devServer config pointing at your webpack config: `devServer: { framework: 'react', webpackConfig: require('./webpack.config.js') }`.
- Place a webpack.config.js (or .ts/.cjs) at your project root so Cypress can auto-detect it.
- If you are actually using Vite, switch to `@cypress/vite-dev-server` instead of the webpack handler.
- Ensure the path/extension is one of the configFile globs Cypress searches (see configFiles passed to onConfigNotFound).
Example fix
// before (cypress.config.ts)
import { defineConfig } from 'cypress'
export default defineConfig({
component: {
devServer: { framework: 'react' },
},
})
// after
import { defineConfig } from 'cypress'
import webpackConfig from './webpack.config.js'
export default defineConfig({
component: {
devServer: { framework: 'react', webpackConfig },
},
}) Defensive patterns
Strategy: validation
Validate before calling
import { existsSync } from 'fs'
const candidateNames = ['webpack.config.js', 'webpack.config.ts', 'webpack.config.cjs', 'webpack.config.mjs']
function hasWebpackConfig (projectRoot: string): boolean {
return candidateNames.some((n) => existsSync(`${projectRoot}/${n}`))
}
if (!hasWebpackConfig(process.cwd())) {
throw new Error('Add a webpackConfig to devServer or create webpack.config.js')
} Type guard
function devServerHasWebpackConfig (devServer: any): boolean {
return Boolean(devServer?.webpackConfig)
} Prevention
- Always pass webpackConfig explicitly in the devServer object.
- Keep a webpack.config.{js,ts} at the project root for auto-detection.
- Use @cypress/vite-dev-server for Vite projects, not the webpack handler.
When it happens
Trigger: Configuring Cypress component testing with `devServer: { framework: 'react' }` (or similar) without a webpackConfig field, in a project that has no webpack.config.js at the root. Reproducible with `defineConfig({ component: { devServer: { framework: 'react' } } })` and no webpack config file anywhere.
Common situations: First-time CT setup where the user picked the wrong devServer shape, custom projects (e.g. Vite-based) accidentally using webpack-dev-server, or a webpack config that was renamed/moved out of the root.
Related errors
- Could not find a project with projectType "application" in "
- Tests cannot run without a reference to Cypress!
- Unsupported webpackDevServer version ${webpackDevServerMajor
- Unexpected framework ${(devServerConfig as any).framework},
- Could not find angular.json. Looked in ${projectRoot} and up
AI-assisted analysis of cypress-io/cypress@0d85fdc912 (2026-08-12).
Data as JSON: /api/errors/3639bb739d47285b.
Report an issue: GitHub.