Getting WebpackOptionsValidationError when going through component testing setup

[dankchor]

Current behavior

I wanted to try setting up component testing for the first time after upgrading to Cypress v10.1.0, but I'm hitting an unexpected error when going through the wizard in the desktop app related to webpack options:

Debug logs

cypress:webpack-dev-server:sourceRelativeWebpackModules Webpack: Successfully sourced webpack - { importPath: '/Users/me/path/to/project/node_modules/webpack', packageJson: { _args: [ [Array] ], _development: true, _from: '[email protected]', _id: '[email protected]', _inBundle: false, _integrity: 'sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==', _location: '/webpack', _phantomChildren: { ajv: '6.10.2', 'ajv-errors': '1.0.1', 'ajv-keywords': '3.5.2', errno: '0.1.7', esrecurse: '4.3.0', estraverse: '4.3.0', 'readable-stream': '2.3.6' }, _requested: { type: 'version', registry: true, raw: '[email protected]', name: 'webpack', escapedName: 'webpack', rawSpec: '4.46.0', saveSpec: null, fetchSpec: '4.46.0' }, _requiredBy: [ '#DEV:/' ], _resolved: 'http://npm.my-private-repo.com/webpack/-/webpack-4.46.0.tgz', _spec: '4.46.0', _where: '/Users/me/path/to/project', author: { name: 'Tobias Koppers @sokra' }, bin: { webpack: 'bin/webpack.js' }, bugs: { url: 'https://github.com/webpack/webpack/issues' }, dependencies: { '@webassemblyjs/ast': '1.9.0', '@webassemblyjs/helper-module-context': '1.9.0', '@webassemblyjs/wasm-edit': '1.9.0', '@webassemblyjs/wasm-parser': '1.9.0', acorn: '^6.4.1', ajv: '^6.10.2', 'ajv-keywords': '^3.4.1', 'chrome-trace-event': '^1.0.2', 'enhanced-resolve': '^4.5.0', 'eslint-scope': '^4.0.3', 'json-parse-better-errors': '^1.0.2', 'loader-runner': '^2.4.0', 'loader-utils': '^1.2.3', 'memory-fs': '^0.4.1', micromatch: '^3.1.10', mkdirp: '^0.5.3', 'neo-async': '^2.6.1', 'node-libs-browser': '^2.2.1', 'schema-utils': '^1.0.0', tapable: '^1.1.3', 'terser-webpack-plugin': '^1.4.3', watchpack: '^1.7.4', 'webpack-sources': '^1.4.1' }, description: 'Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.', devDependencies: { '@babel/core': '^7.7.2', '@types/node': '^10.12.21', '@types/tapable': '^1.0.1', '@types/webpack-sources': '^0.1.4', '@yarnpkg/lockfile': '^1.1.0', 'babel-loader': '^8.0.6', benchmark: '^2.1.1', 'bundle-loader': '~0.5.0', 'coffee-loader': '^0.9.0', coffeescript: '^2.3.2', coveralls: '^3.0.2', 'css-loader': '^2.1.0', 'es6-promise-polyfill': '^1.1.1', eslint: '^5.8.0', 'eslint-config-prettier': '^4.0.0', 'eslint-plugin-jest': '^22.2.2', 'eslint-plugin-jsdoc': '^15.3.2', 'eslint-plugin-node': '^8.0.0', 'eslint-plugin-prettier': '^3.0.0', express: '~4.16.4', 'file-loader': '^3.0.1', glob: '^7.1.3', husky: '^1.1.3', 'i18n-webpack-plugin': '^1.0.0', istanbul: '^0.4.5', jest: '^24.9.0', 'jest-junit': '^8.0.0', 'json-loader': '^0.5.7', 'json-schema-to-typescript': '^6.0.1', less: '^3.9.0', 'less-loader': '^4.0.3', 'lint-staged': '^8.0.4', lodash: '^4.17.4', prettier: '^1.14.3', pug: '^2.0.4', 'pug-loader': '^2.4.0', 'raw-loader': '^1.0.0', react: '^16.8.0', 'react-dom': '^16.8.0', rimraf: '^2.6.2', 'script-loader': '~0.7.0', 'simple-git': '^1.65.0', 'strip-ansi': '^5.2.0', 'style-loader': '^0.23.1', typescript: '^3.0.0-rc', 'url-loader': '^1.1.2', 'val-loader': '^1.0.2', 'vm-browserify': '~1.1.0', 'wast-loader': '^1.5.5', 'webassembly-feature': '1.3.0', 'webpack-dev-middleware': '^3.5.1', 'worker-loader': '^2.0.0', xxhashjs: '^0.2.1' }, engines: { node: '>=6.11.5' }, files: [ 'lib/', 'bin/', 'buildin/', 'declarations/', 'hot/', 'web_modules/', 'schemas/', 'SECURITY.md' ], funding: { type: 'opencollective', url: 'https://opencollective.com/webpack' }, homepage: 'https://github.com/webpack/webpack', husky: { hooks: [Object] }, jest: { forceExit: true, setupFilesAfterEnv: [Array], testMatch: [Array], watchPathIgnorePatterns: [Array], modulePathIgnorePatterns: [Array], transformIgnorePatterns: [Array], coverageDirectory: '<rootDir>/coverage', coveragePathIgnorePatterns: [Array], testEnvironment: 'node', coverageReporters: [Array] }, license: 'MIT', 'lint-staged': { '*.js|{lib,setup,bin,hot,buildin,tooling,schemas}/**/*.js|test/*.js|{test,examples}/**/webpack.config.js}': [Array] }, main: 'lib/webpack.js', name: 'webpack', peerDependenciesMeta: { 'webpack-cli': [Object], 'webpack-command': [Object] }, repository: { type: 'git', url: 'git+https://github.com/webpack/webpack.git' }, scripts: { 'appveyor:benchmark': 'yarn benchmark --ci', 'appveyor:integration': 'yarn cover:integration --ci %JEST%', 'appveyor:unit': 'yarn cover:unit --ci %JEST%', benchmark: 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.benchmark.js" --runInBand', 'build:examples': 'cd examples && node buildAll.js', 'code-lint': "eslint . --ext '.js' --cache", cover: 'yarn cover:all && yarn cover:report', 'cover:all': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --coverage', 'cover:basic': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/te{st/TestCasesNormal,st/StatsTestCases,st/ConfigTestCases}.test.js" --coverage', 'cover:integration': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.test.js" --coverage', 'cover:report': 'istanbul report', 'cover:unit': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.unittest.js" --coverage', fix: 'yarn code-lint --fix && yarn special-lint-fix', 'jest-lint': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.lint.js" --no-verbose', lint: 'yarn code-lint && yarn jest-lint && yarn type-lint && yarn special-lint', prelint: 'yarn setup', pretest: 'yarn lint', pretty: 'prettier --loglevel warn --write "*.{ts,js,json,yml,yaml}" "{setup,lib,bin,hot,buildin,benchmark,tooling,schemas}/**/*.{js,json}" "test/*.js" "test/helpers/*.js" "test/{configCases,watchCases,statsCases,hotCases}/**/webpack.config.js" "examples/**/webpack.config.js"'  cypress:lifecycle:ProjectConfigIpc plugins process error: WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property '1'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           1: …
         }
       })
     ]
    at webpack (/Users/me/path/to/project/node_modules/webpack/lib/webpack.js:31:9)
    at createWebpackDevServer (/Users/me/Library/Caches/Cypress/10.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/createWebpackDevServer.js:11:29)
    at async Function.devServer.create (/Users/me/Library/Caches/Cypress/10.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:91:34)
    at async /Users/me/Library/Caches/Cypress/10.1.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24 +1h

Cypress Version

10.1.0

Package Manager

npm

Operating system

Mac

Other

No response

[marktnoonan]

Hi @dankchor, can you give us some more information about this? Before you hit this page, during setup you would choose a Framework and Bundler. Can you confirm what you chose for those options, and share details of the project that you are using to set up component testing?

The best way to provide these details is to create a repo that's similar to what your project is and share it with us so that we can see this in action and debug from there.

[dankchor]

@marktnoonan yeah, i chose react and webpack during the setup. i think for now i'll just close this issue out since i dont think i'll have time to recreate our setup in a new repo. i was hoping maybe there was something obvious that i was missing!

[tpict]

@marktnoonan I'm seeing something similar. The error is identical but the unknown property seemingly changes numbers (I've seen 13 and 16) depending on the Webpack configuration. Even with the Webpack config reduced to

"use strict";

module.exports = {
  entry: {
    app "./src/index.tsx",
  },
};

it fails. I wouldn't expect this config to actually work without various loaders etc, but it should at least pass validation, right?

Relevant package versions:

• React 18.2.0
• Webpack 5.73.0
• Webpack CLI 4.10.0
• Cypress 10.2.0
• Typescript 4.6.4

My cypress.config.ts:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    setupNodeEvents(on, config) {
      return require("./cypress/plugins/index.ts")(on, config);
    },
  },

  component: {
    devServer: {
      framework: "react",
      bundler: "webpack",
      webpackConfig: "webpack.common.js",
    },
  },
});

I can't provide an exact repo but let me know if there's anything useful I can get for you.

[JenniferTactill]

@marktnoonan Any update ? Running into the same issue here

• React 18.2.0
• Webpack 4.44.2
• Cypress 10.1.0
• Typescript 4.7.3

cypress.config.js

import { defineConfig } from "cypress";

export default defineConfig({
  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

[kwantdev]

The same problem!

[marktnoonan]

Hey friends, sorry I missed these comments - the issue was closed by the OP so not expecting new comments. I've reopened the issue. If somebody can recreate using this template that would help speed up narrowing this down: https://github.com/cypress-io/cypress-test-tiny

@JenniferTactill did you get past this issue? @kwantdev can you provide any more details about where you hit this problem, or a repro. Thanks.

[ZachJW34]

@tpict I noticed you're passing a string/path to the webpackConfig property, could you change it to webpackConfig: require('./webpack.common.js') and see if that works for you?

[zinckiwi]

@ZachJW34's suggestion worked for me. Didn't realise it was supposed to be a configuration object instead of a path, but that's just an assumption I made without realising it.

[brandynprasad]

@tpict I noticed you're passing a string/path to the webpackConfig property, could you change it to webpackConfig: require('./webpack.common.js') and see if that works for you?

Just wanted to mention that our team has run into similar behaviour as others have described in this thread. This happens immediately after selecting the "react/webpack" option while using the component testing setup wizard. Our setup below:

React 18.2.0 Webpack 4.46 Cypress 12.0.2 Typescript 4.2.3

cypress.config.js:

module.exports = {
  ...require("cypress").defineConfig({
    e2e: {
      baseUrl: "https://example.com",
      supportFile: "cypress/support/e2e.ts",
    },
  }),

  component: {
    devServer: {
      framework: "react",
      bundler: "webpack",
      webpackConfig: require("./webpack.js"),
    },
  },
};

stack traces:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'static'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           static: …
         }
       })
     ]
    at webpack (/Users/brandyn.prasad/dev/PATH_TO_REPO/web-client/node_modules/webpack/lib/webpack.js:31:9)
    at createWebpackDevServer (/Users/brandyn.prasad/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/createWebpackDevServer.js:11:29)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Function.devServer.create (/Users/brandyn.prasad/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:94:34)
    at async /Users/brandyn.prasad/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24

Please let me know if there is any further information required from our end. Thanks!

[ZachJW34]

This issue is caused by passing webpack@4 options to webpack@5 or vice versa so I'll need some more info. @brandynprasad could you provide a minimal reproduction that I can pull down and dig into? If not, could you share the output of running DEBUG=cypress:webpack-dev-server* npx cypress open and trying to launch CT? This will give me some insight into what dependencies are being sourced (webpack, webpack-dev-server etc...).

[brandynprasad]

This issue is caused by passing webpack@4 options to webpack@5 or vice versa so I'll need some more info. @brandynprasad could you provide a minimal reproduction that I can pull down and dig into? If not, could you share the output of running DEBUG=cypress:webpack-dev-server* npx cypress open and trying to launch CT? This will give me some insight into what dependencies are being sourced (webpack, webpack-dev-server etc...).

Hi @ZachJW34 , thanks for your insight on the webpack options version discrepancy. I cannot provide a minimal reproduction at this time, but I can share the output of running your suggested command. Note that I used yarn instead of npx, but I assume that should not be an issue:

$ DEBUG=cypress:webpack-dev-server* yarn cypress open
yarn run v1.22.11
$ /Users/brandyn.prasad/dev/PATH_TO_REPO/web-client/node_modules/.bin/cypress open
  cypress:webpack-dev-server:sourceRelativeWebpackModules Framework: Attempting to source framework for /Users/brandyn.prasad/dev/PATH_TO_REPO/web-client +0ms
  cypress:webpack-dev-server:sourceRelativeWebpackModules Not a higher-order framework so webpack dependencies should be resolvable from projectRoot +1ms
  cypress:webpack-dev-server:sourceRelativeWebpackModules Webpack: Attempting to source webpack from /Users/brandyn.prasad/dev/PATH_TO_REPO/web-client +0ms
  cypress:webpack-dev-server:sourceRelativeWebpackModules Webpack: Successfully sourced webpack - { importPath: '/Users/brandyn.prasad/dev/PATH_TO_REPO/web-client/node_modules/webpack', packageJson: { name: 'webpack', version: '4.46.0', author: 'Tobias Koppers @sokra', description: 'Packs CommonJs/AMD modules for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand. Support loaders to preprocess files, i.e. json, jsx, es7, css, less, ... and your custom stuff.', license: 'MIT', dependencies: { '@webassemblyjs/ast': '1.9.0', '@webassemblyjs/helper-module-context': '1.9.0', '@webassemblyjs/wasm-edit': '1.9.0', '@webassemblyjs/wasm-parser': '1.9.0', acorn: '^6.4.1', ajv: '^6.10.2', 'ajv-keywords': '^3.4.1', 'chrome-trace-event': '^1.0.2', 'enhanced-resolve': '^4.5.0', 'eslint-scope': '^4.0.3', 'json-parse-better-errors': '^1.0.2', 'loader-runner': '^2.4.0', 'loader-utils': '^1.2.3', 'memory-fs': '^0.4.1', micromatch: '^3.1.10', mkdirp: '^0.5.3', 'neo-async': '^2.6.1', 'node-libs-browser': '^2.2.1', 'schema-utils': '^1.0.0', tapable: '^1.1.3', 'terser-webpack-plugin': '^1.4.3', watchpack: '^1.7.4', 'webpack-sources': '^1.4.1' }, peerDependenciesMeta: { 'webpack-cli': [Object], 'webpack-command': [Object] }, devDependencies: { '@babel/core': '^7.7.2', '@types/node': '^10.12.21', '@types/tapable': '^1.0.1', '@types/webpack-sources': '^0.1.4', '@yarnpkg/lockfile': '^1.1.0', 'babel-loader': '^8.0.6', benchmark: '^2.1.1', 'bundle-loader': '~0.5.0', 'coffee-loader': '^0.9.0', coffeescript: '^2.3.2', coveralls: '^3.0.2', 'css-loader': '^2.1.0', 'es6-promise-polyfill': '^1.1.1', eslint: '^5.8.0', 'eslint-config-prettier': '^4.0.0', 'eslint-plugin-jest': '^22.2.2', 'eslint-plugin-jsdoc': '^15.3.2', 'eslint-plugin-node': '^8.0.0', 'eslint-plugin-prettier': '^3.0.0', express: '~4.16.4', 'file-loader': '^3.0.1', glob: '^7.1.3', husky: '^1.1.3', 'i18n-webpack-plugin': '^1.0.0', istanbul: '^0.4.5', jest: '^24.9.0', 'jest-junit': '^8.0.0', 'json-loader': '^0.5.7', 'json-schema-to-typescript': '^6.0.1', less: '^3.9.0', 'less-loader': '^4.0.3', 'lint-staged': '^8.0.4', lodash: '^4.17.4', prettier: '^1.14.3', pug: '^2.0.4', 'pug-loader': '^2.4.0', 'raw-loader': '^1.0.0', react: '^16.8.0', 'react-dom': '^16.8.0', rimraf: '^2.6.2', 'script-loader': '~0.7.0', 'simple-git': '^1.65.0', 'strip-ansi': '^5.2.0', 'style-loader': '^0.23.1', typescript: '^3.0.0-rc', 'url-loader': '^1.1.2', 'val-loader': '^1.0.2', 'vm-browserify': '~1.1.0', 'wast-loader': '^1.5.5', 'webpack-dev-middleware': '^3.5.1', 'webassembly-feature': '1.3.0', 'worker-loader': '^2.0.0', xxhashjs: '^0.2.1' }, engines: { node: '>=6.11.5' }, repository: { type: 'git', url: 'https://github.com/webpack/webpack.git' }, funding: { type: 'opencollective', url: 'https://opencollective.com/webpack' }, homepage: 'https://github.com/webpack/webpack', main: 'lib/webpack.js', web: 'lib/webpack.web.js', bin: './bin/webpack.js', files: [ 'lib/', 'bin/', 'buildin/', 'declarations/', 'hot/', 'web_modules/', 'schemas/', 'SECURITY.md' ], scripts: { setup: 'node ./setup/setup.js', test: 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest', 'test:update-snapshots': 'yarn jest -u', 'test:integration': 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.test.js"', 'test:basic': 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest --testMatch "<rootDir>/te{st/TestCasesNormal,st/StatsTestCases,st/ConfigTestCases}.test.js"', 'test:unit': 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.unittest.js"', 'travis:integration': 'yarn cover:integration --ci $JEST', 'travis:basic': 'yarn cover:basic --ci $JEST', 'travis:lintunit': 'yarn lint && yarn cover:unit --ci $JEST', 'travis:benchmark': 'yarn benchmark --ci', 'appveyor:integration': 'yarn cover:integration --ci %JEST%', 'appveyor:unit': 'yarn cover:unit --ci %JEST%', 'appveyor:benchmark': 'yarn benchmark --ci', 'build:examples': 'cd examples && node buildAll.js', pretest: 'yarn lint', prelint: 'yarn setup', lint: 'yarn code-lint && yarn jest-lint && yarn type-lint && yarn special-lint', 'code-lint': "eslint . --ext '.js' --cache", 'type-lint': 'tsc --pretty', 'special-lint': 'node tooling/inherit-types && node tooling/format-schemas && node tooling/compile-to-definitions', 'special-lint-fix': 'node tooling/inherit-types --write --override && node tooling/format-schemas --write && node tooling/compile-to-definitions --write', fix: 'yarn code-lint --fix && yarn special-lint-fix', pretty: 'prettier --loglevel warn --write "*.{ts,js,json,yml,yaml}" "{setup,lib,bin,hot,buildin,benchmark,tooling,schemas}/**/*.{js,json}" "test/*.js" "test/helpers/*.js" "test/{configCases,watchCases,statsCases,hotCases}/**/webpack.config.js" "examples/**/webpack.config.js"', 'jest-lint': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.lint.js" --no-verbose', benchmark: 'node --max-old-space-size=4096 --trace-deprecation node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.benchmark.js" --runInBand', cover: 'yarn cover:all && yarn cover:report', 'cover:all': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --coverage', 'cover:basic': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/te{st/TestCasesNormal,st/StatsTestCases,st/ConfigTestCases}.test.js" --coverage', 'cover:integration': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.test.js" --coverage', 'cover:unit': 'node --max-old-space-size=4096 node_modules/jest-cli/bin/jest --testMatch "<rootDir>/test/*.unittest.js" --coverage', 'cover:report': 'istanbul report' }, husky: { hooks: [Object] }, 'lint-staged': { '*.js|{lib,setup,bin,hot,buildin,tooling,schemas}/**/*.js|test/*.js|{test,examples}/**/webpack.config.js}': [Array] }, jest: { forceExit: true, setupFilesAfterE

[ZachJW34]

Can you provide the version of webpack-dev-server you are using? The static property looks to be a nested property of devServer and in your case it seems to be a top-level property.

[brandynprasad]

Can you provide the version of webpack-dev-server you are using? The static property looks to be a nested property of devServer and in your case it seems to be a top-level property.

using "webpack-dev-server": "3.10"

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.

[sandinmyjoints]

From what I can tell, Cypress component testing does not support webpack configurations that export arrays (whether of config objects or of functions that return config objects), even though webpack supports them: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations At least, I was able to solve my validation errors by specifying webpackConfig: require('../webpack.config')[0] in cypress.config.js.

[gauravsaxena03]

@ marktnoonan I see the same error, tried the following which did not work

import webpackconfig from '../webpack.config'; ==>{webpack.config returns an array of configs [config1,config2]}

component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: webpackconfig[0],
    },

I tried to return just a single value instead of the array and that worked

import webpackconfig from '../webpack.config'; ==>{webpack.config returns a single value(not array) config1}
component: {
    devServer: {
      framework: 'react',
      bundler: 'webpack',
      webpackConfig: webpackconfig,
    },

I'm not sure how the two are different, and doesn't solve my problem since I need both configs