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

  1. Add a `webpackConfig` field to your devServer config pointing at your webpack config: `devServer: { framework: 'react', webpackConfig: require('./webpack.config.js') }`.
  2. Place a webpack.config.js (or .ts/.cjs) at your project root so Cypress can auto-detect it.
  3. If you are actually using Vite, switch to `@cypress/vite-dev-server` instead of the webpack handler.
  4. 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

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


AI-assisted analysis of cypress-io/cypress@0d85fdc912 (2026-08-12). Data as JSON: /api/errors/3639bb739d47285b. Report an issue: GitHub.