{"record":{"id":"3639bb739d47285b","repo":"cypress-io/cypress","slug":"your-cypress-devserver-config-is-missing-a-require","errorCode":null,"errorMessage":"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}","messagePattern":"Your Cypress devServer config is missing a required webpackConfig property, since we could not automatically detect one\\.\\\\nPlease add one to your (.+?)","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"npm/webpack-dev-server/src/makeWebpackConfig.ts","lineNumber":119,"sourceCode":"    if (configFile) {\n      debug('found webpack config %s', configFile)\n      const sourcedConfig = await importModule(configFile)\n\n      debug('config contains %o', sourcedConfig)\n      if (sourcedConfig && typeof sourcedConfig === 'object') {\n        userWebpackConfig = sourcedConfig.default ?? sourcedConfig\n      }\n    }\n\n    if (!userWebpackConfig) {\n      debug('could not find webpack.config!')\n      if (config.devServerConfig?.onConfigNotFound) {\n        config.devServerConfig.onConfigNotFound('webpack', projectRoot, configFiles)\n        // The config process will be killed from the parent, but we want to early exit so we don't get\n        // any additional errors related to not having a config\n        process.exit(0)\n      } else {\n        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}`)\n      }\n    }\n  }\n\n  userWebpackConfig = typeof userWebpackConfig === 'function'\n    ? await userWebpackConfig()\n    : userWebpackConfig\n\n  const userAndFrameworkWebpackConfig = modifyWebpackConfigForCypress(\n    merge(frameworkWebpackConfig ?? {}, userWebpackConfig ?? {}),\n  )\n\n  debug(`User passed in user and framework webpack config with values %o`, userAndFrameworkWebpackConfig)\n  debug(`New webpack entries %o`, config.devServerConfig.specs)\n  debug(`Project root`, projectRoot)\n  debug(`Support file`, supportFile)\n\n  const mergedConfig = merge(","sourceCodeStart":101,"sourceCodeEnd":137,"githubUrl":"https://github.com/cypress-io/cypress/blob/0d85fdc91230885bca0a91df278312800a48b727/npm/webpack-dev-server/src/makeWebpackConfig.ts#L101-L137","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","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)."],"exampleFix":"// before (cypress.config.ts)\nimport { defineConfig } from 'cypress'\n\nexport default defineConfig({\n  component: {\n    devServer: { framework: 'react' },\n  },\n})\n// after\nimport { defineConfig } from 'cypress'\nimport webpackConfig from './webpack.config.js'\n\nexport default defineConfig({\n  component: {\n    devServer: { framework: 'react', webpackConfig },\n  },\n})","handlingStrategy":"validation","validationCode":"import { existsSync } from 'fs'\n\nconst candidateNames = ['webpack.config.js', 'webpack.config.ts', 'webpack.config.cjs', 'webpack.config.mjs']\nfunction hasWebpackConfig (projectRoot: string): boolean {\n  return candidateNames.some((n) => existsSync(`${projectRoot}/${n}`))\n}\n\nif (!hasWebpackConfig(process.cwd())) {\n  throw new Error('Add a webpackConfig to devServer or create webpack.config.js')\n}","typeGuard":"function devServerHasWebpackConfig (devServer: any): boolean {\n  return Boolean(devServer?.webpackConfig)\n}","tryCatchPattern":null,"preventionTips":["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."],"tags":["webpack","configuration","component-testing","dev-server"],"backgroundTag":null,"analyzedSha":"0d85fdc91230885bca0a91df278312800a48b727","analyzedAt":"2026-08-12T16:24:28.056Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}