fix: update scaffold template to use correct path (#20047)

* fix: update scaffold template to use correct path

* Remove support for dynamic import on devServer

* Update scaffold template

* Update config files

* Update with feedback

* Rename cypressConfig to cypressDevServerConfig

* Update devserver link

* Update comment

cli/types/cypress.d.ts

@@ -1,12 +1,6 @@
 /// <reference path="./cypress-npm-api.d.ts" />
 /// <reference path="./cypress-eventemitter.d.ts" />
 
-// The new Awaited type added in 4.5 would work here, but we seem to need to
-// support older versions of Typescript
-type AwaitedLike<T> = T extends PromiseLike<infer U>
-  ? { 0: AwaitedLike<U>; 1: U }[U extends PromiseLike<any> ? 0 : 1]
-  : T
-
 declare namespace Cypress {
   type FileContents = string | any[] | object
   type HistoryDirection = 'back' | 'forward'
@@ -2991,10 +2985,10 @@ declare namespace Cypress {
    */
   type CoreConfigOptions = Partial<Omit<ResolvedConfigOptions, TestingType>>
 
-  type DevServerFn<ComponentDevServerOpts = any> = (cypressConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
+  type DevServerFn<ComponentDevServerOpts = any> = (cypressDevServerConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) => ResolvedDevServerConfig | Promise<ResolvedDevServerConfig>
   interface ComponentConfigOptions<ComponentDevServerOpts = any> extends CoreConfigOptions {
-    devServer: Promise<{ devServer: DevServerFn<ComponentDevServerOpts>}> | { devServer: DevServerFn<ComponentDevServerOpts> } | DevServerFn<ComponentDevServerOpts>
-    devServerConfig?: ComponentDevServerOpts | AwaitedLike<Promise<ComponentDevServerOpts>>
+    devServer: DevServerFn<ComponentDevServerOpts>
+    devServerConfig?: ComponentDevServerOpts
   }
 
   /**

npm/angular/cypress.config.ts

@@ -10,12 +10,12 @@ export default defineConfig({
     setupNodeEvents (on, config) {
       return require('./cypress/plugins')(on, config)
     },
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./cypress/plugins/webpack.config')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig,
       })
     },

npm/design-system/cypress.config.js

@@ -12,10 +12,10 @@ module.exports = {
       '**/__snapshots__/*',
       '**/__image_snapshots__/*',
     ],
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 
-      return startDevServer({ options: cypressConfig })
+      return startDevServer({ options: cypressDevServerConfig })
     },
   },
 }

npm/react/cypress.config.js

@@ -15,7 +15,7 @@ module.exports = {
       '**/__image_snapshots__/*',
       'examples/**/*',
     ],
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const path = require('path')
       const babelConfig = require('./babel.config.js')
@@ -73,7 +73,7 @@ module.exports = {
         },
       }
 
-      return startDevServer({ options: cypressConfig, disableLazyCompilation: false, webpackConfig })
+      return startDevServer({ options: cypressDevServerConfig, disableLazyCompilation: false, webpackConfig })
     },
   },
 }

npm/react/examples/find-webpack/cypress.config.ts

@@ -4,7 +4,7 @@ export default defineConfig({
   'video': true,
   'projectId': 'jq5xpp',
   'component': {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const findReactScriptsWebpackConfig = require('@cypress/react/plugins/react-scripts/findReactScriptsWebpackConfig')
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const _ = require('lodash')
@@ -12,14 +12,14 @@ export default defineConfig({
       const map = _.map([4, 8], (n) => n * 2)
 
       console.log(map)
-      const webpackConfig = findReactScriptsWebpackConfig(cypressConfig.config)
+      const webpackConfig = findReactScriptsWebpackConfig(cypressDevServerConfig.config)
 
       const rules = webpackConfig.module.rules.find((rule) => !!rule.oneOf).oneOf
       const babelRule = rules.find((rule) => typeof rule.loader === 'string' && /babel-loader/.test(rule.loader))
 
       typeof babelRule.options !== 'string' && babelRule.options.plugins.push(require.resolve('babel-plugin-istanbul'))
 
-      return startDevServer({ options: cypressConfig, webpackConfig })
+      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
     },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)

npm/react/examples/nextjs-webpack-5/cypress.config.js

@@ -1,15 +1,11 @@
+const { devServer } = require('@cypress/react/plugins/next')
+
 module.exports = {
   'video': false,
   'viewportWidth': 500,
   'viewportHeight': 800,
   'pluginsFile': 'cypress/plugins.js',
   'component': {
-    setupNodeEvents (on, config) {
-      const devServer = require('@cypress/react/plugins/next')
-
-      devServer(on, config)
-
-      return config
-    },
+    devServer,
   },
 }

npm/react/examples/nextjs/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/react/plugins/next')
+
 module.exports = {
   'video': false,
   'viewportWidth': 500,
@@ -7,6 +9,6 @@ module.exports = {
     'coverage': true,
   },
   'component': {
-    devServer: require('@cypress/react/plugins/next'),
+    devServer,
   },
 }

npm/react/examples/react-scripts-folder/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/react/plugins/react-scripts')
+
 module.exports = {
   'video': false,
   'fixturesFolder': false,
@@ -6,6 +8,6 @@ module.exports = {
   'component': {
     // load file devServer that comes with this plugin
     // https://github.com/bahmutov/cypress-react-unit-test#install
-    devServer: require('@cypress/react/plugins/react-scripts'),
+    devServer,
   },
 }

npm/react/examples/react-scripts-typescript/cypress.config.js

@@ -1,10 +1,11 @@
 const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/react/plugins/react-scripts')
 
 module.exports = defineConfig({
   'video': false,
   'viewportWidth': 500,
   'viewportHeight': 800,
   'component': {
-    devServer: require('@cypress/react/plugins/react-scripts'),
+    devServer,
   },
 })

npm/react/examples/react-scripts/cypress.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/react/plugins/react-scripts')
 
 module.exports = defineConfig({
   'video': false,
@@ -6,6 +7,6 @@ module.exports = defineConfig({
   'viewportHeight': 800,
   'experimentalFetchPolyfill': true,
   'component': {
-    devServer: require('@cypress/react/plugins/react-scripts'),
+    devServer,
   },
 })

npm/react/examples/tailwind/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/react/plugins/react-scripts')
+
 module.exports = {
   'video': false,
   'fixturesFolder': false,
@@ -9,6 +11,6 @@ module.exports = {
   component: {
     // load file devServer that comes with this plugin
     // https://github.com/bahmutov/cypress-react-unit-test#install
-    devServer: require('@cypress/react/plugins/react-scripts'),
+    devServer,
   },
 }

npm/react/examples/using-babel-typescript/cypress.config.js

@@ -1,3 +1,5 @@
+const { devServer } = require('@cypress/react/plugins/babel')
+
 module.exports = {
   'video': false,
   'fixturesFolder': false,
@@ -7,6 +9,6 @@ module.exports = {
     // let's bundle spec files and the components they include using
     // the same bundling settings as the project by loading .babelrc
     // https://github.com/bahmutov/cypress-react-unit-test#install
-    devServer: require('@cypress/react/plugins/babel'),
+    devServer,
   },
 }

npm/react/examples/webpack-file/cypress.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/react/plugins/load-webpack')
 
 module.exports = defineConfig({
   'video': false,
@@ -6,7 +7,7 @@ module.exports = defineConfig({
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    devServer: require('@cypress/react/plugins/load-webpack'),
+    devServer,
     devServerConfig: {
       // from the root of the project (folder with cypress.config.{ts|js} file)
       webpackFilename: 'webpack.config.js',

npm/react/examples/webpack-options/cypress.config.js

@@ -4,7 +4,7 @@ module.exports = {
   'viewportWidth': 500,
   'viewportHeight': 500,
   'component': {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const path = require('path')
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const babelConfig = require('./babel.config')
@@ -34,7 +34,7 @@ module.exports = {
 
       process.env.BABEL_ENV = 'test' // this is required to load commonjs babel plugin
 
-      return startDevServer({ options: cypressConfig, webpackConfig })
+      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
     },
   },
 }

npm/vite-dev-server/cypress.config.ts

@@ -6,12 +6,12 @@ export default defineConfig({
   'fixturesFolder': false,
   'component': {
     'supportFile': 'cypress/support.js',
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const path = require('path')
       const { startDevServer } = require('./dist')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         viteConfig: {
           configFile: path.resolve(__dirname, 'vite.config.ts'),
         },

npm/vue/cypress.config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
   },
   'component': {
     excludeSpecPattern: 'examples/**/*',
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')
 
@@ -25,7 +25,7 @@ export default defineConfig({
         '@vue/compiler-core$': '@vue/compiler-core/dist/compiler-core.cjs.js',
       }
 
-      return startDevServer({ options: cypressConfig, webpackConfig })
+      return startDevServer({ options: cypressDevServerConfig, webpackConfig })
     },
     setupNodeEvents (on, config) {
       require('@cypress/code-coverage/task')(on, config)

npm/vue/examples/code-coverage/cypress.config.js

@@ -2,12 +2,12 @@ module.exports = {
   'fixturesFolder': false,
   'video': false,
   'component': {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('./webpack.config')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig,
       })
     },

npm/vue/examples/vue-cli/cypress.config.js

@@ -2,7 +2,7 @@ module.exports = {
   'video': false,
   'fixturesFolder': false,
   'component': {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
       const webpackConfig = require('@vue/cli-service/webpack.config')
 
@@ -19,7 +19,7 @@ module.exports = {
       }
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig: modifiedWebpackConfig,
       })
     },

packages/data-context/src/actions/WizardActions.ts

@@ -226,14 +226,16 @@ export class WizardActions {
     const codeBlocks: string[] = []
     const { chosenBundler, chosenFramework, chosenLanguage } = opts
 
+    const requirePath = chosenFramework.defaultPackagePath ?? chosenBundler.package
+
     codeBlocks.push(chosenLanguage.type === 'ts' ? `import { defineConfig } from 'cypress'` : `const { defineConfig } = require('cypress')`)
+    codeBlocks.push(chosenLanguage.type === 'ts' ? `import { devServer } from '${requirePath}'` : `const { devServer } = require('${requirePath}')`)
     codeBlocks.push('')
     codeBlocks.push(chosenLanguage.type === 'ts' ? `export default defineConfig({` : `module.exports = defineConfig({`)
     codeBlocks.push(`  // Component testing, ${chosenLanguage.name}, ${chosenFramework.name}, ${chosenBundler.name}`)
 
     codeBlocks.push(`  ${COMPONENT_SCAFFOLD_BODY({
       lang: chosenLanguage.type,
-      requirePath: chosenBundler.package,
       configOptionsString: '{}',
     }).replace(/\n/g, '\n  ')}`)
 
@@ -346,7 +348,6 @@ const E2E_SCAFFOLD_BODY = dedent`
 
 interface ComponentScaffoldOpts {
   lang: CodeLanguageEnum
-  requirePath: string
   configOptionsString: string
   specPattern?: string
 }
@@ -354,7 +355,7 @@ interface ComponentScaffoldOpts {
 const COMPONENT_SCAFFOLD_BODY = (opts: ComponentScaffoldOpts) => {
   return dedent`
     component: {
-      devServer: import('${opts.requirePath}'),
+      devServer,
       devServerConfig: ${opts.configOptionsString}
     },
   `

packages/frontend-shared/cypress.config.ts

@@ -16,11 +16,11 @@ export default defineConfig({
     'configFile': '../../mocha-reporter-config.json',
   },
   'component': {
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         ...devServerConfig,
       })
     },

packages/frontend-shared/cypress/e2e/support/e2eProjectDirs.ts

@@ -15,6 +15,7 @@ export const e2eProjectDirs = [
   'cookies',
   'cypress-in-cypress',
   'default-layout',
+  'devServer-dynamic-import',
   'downloads',
   'e2e',
   'empty-folders',

packages/launchpad/cypress.config.ts

@@ -17,11 +17,11 @@ export default defineConfig({
   },
   'component': {
     'supportFile': 'cypress/component/support/index.ts',
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/vite-dev-server')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         ...devServerConfig,
       })
     },

packages/runner-ct/cypress.config.ts

@@ -10,7 +10,7 @@ export default defineConfig({
     configFile: '../../mocha-reporter-config.json',
   },
   component: {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
       function injectStylesInlineForPercyInPlace (webpackConfig) {
@@ -34,7 +34,7 @@ export default defineConfig({
 
       return startDevServer({
         webpackConfig,
-        options: cypressConfig,
+        options: cypressDevServerConfig,
       })
     },
   },

packages/server/lib/errors.js

@@ -583,12 +583,12 @@ const getMsgByType = function (type, ...args) {
           The \`component\`.\`devServer\` method must be a function with the following signature:
 
           \`\`\`
-          devServer: (cypressConfig: DevServerConfig, devServerConfig: ComponentDevServerOpts) {
-
+          devServer: (cypressDevServerConfig, devServerConfig) {
+            // start dev server here
           }
           \`\`\`
 
-          Learn more: https://on.cypress.io/plugins-api
+          Learn more: https://on.cypress.io/dev-server
 
           We loaded the \`devServer\` from: \`${arg1}\`
   
@@ -600,12 +600,12 @@ const getMsgByType = function (type, ...args) {
         The \`setupNodeEvents\` method does not support \`dev-server:start\`, use \`devServer\` instead:
 
         \`\`\`
-        devServer (cypressConfig, devServerConfig) {
-          // configure plugins here
+        devServer (cypressDevServerConfig, devServerConfig) {
+          // start dev server here
         }
         \`\`\`
 
-        Learn more: https://on.cypress.io/plugins-api
+        Learn more: https://on.cypress.io/dev-server
       `
     case 'PLUGINS_FUNCTION_ERROR':
       msg = stripIndent`\

packages/server/lib/plugins/child/run_require_async_child.js

@@ -67,7 +67,7 @@ function run (ipc, configFile, projectRoot) {
   const isValidDevServer = (config) => {
     const { devServer } = config
 
-    if (devServer && (typeof devServer.devServer === 'function' || typeof devServer === 'function' || typeof devServer.then === 'function')) {
+    if (devServer && typeof devServer === 'function') {
       return true
     }
 
@@ -113,30 +113,9 @@ function run (ipc, configFile, projectRoot) {
 
             const { devServer } = result.component
 
-            // Accounts for `devServer: require('@cypress/webpack-dev-server')
-            if (typeof devServer.devServer === 'function') {
-              on('dev-server:start', (options) => devServer.devServer(options, result.component && result.component.devServerConfig))
+            on('dev-server:start', (options) => devServer(options, result.component && result.component.devServerConfig))
 
-              return setupNodeEvents(on, config)
-            }
-
-            // Accounts for `devServer() {}`
-            if (typeof devServer === 'function') {
-              on('dev-server:start', (options) => devServer(options, result.component && result.component.devServerConfig))
-
-              return setupNodeEvents(on, config)
-            }
-
-            // Accounts for `devServer: import('@cypress/webpack-dev-server')`
-            if (result.component && typeof result.component.devServer.then === 'function') {
-              return Promise.resolve(result.component.devServer).then(({ devServer }) => {
-                if (typeof devServer === 'function') {
-                  on('dev-server:start', (options) => devServer(options, result.component && result.component.devServerConfig))
-                }
-
-                return setupNodeEvents(on, config)
-              })
-            }
+            return setupNodeEvents(on, config)
           })
         } else if (testingType === 'e2e') {
           if (!isValidSetupNodeEvents(result.e2e && result.e2e.setupNodeEvents)) {

packages/types/src/constants.ts

@@ -34,6 +34,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'Create React App',
     supportedBundlers: ['webpack'],
     package: '@cypress/react',
+    defaultPackagePath: '@cypress/react/plugins/react-scripts',
     glob: '*.{jsx,tsx}',
     deps: ['react-scripts', 'react', 'react-dom'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[0],
@@ -45,6 +46,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'Vue CLI',
     supportedBundlers: ['webpack'],
     package: '@cypress/vue',
+    defaultPackagePath: null,
     glob: '*.vue',
     deps: ['@vue/cli-service', 'vue'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[1],
@@ -56,6 +58,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'React.js',
     supportedBundlers: ['webpack', 'vite'],
     package: '@cypress/react',
+    defaultPackagePath: null,
     glob: '*.{jsx,tsx}',
     deps: ['react', 'react-dom'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[0],
@@ -67,6 +70,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'Vue.js',
     supportedBundlers: ['webpack', 'vite'],
     package: '@cypress/vue',
+    defaultPackagePath: null,
     glob: '*.vue',
     deps: ['vue'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[1],
@@ -78,6 +82,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'Next.js',
     supportedBundlers: ['webpack'],
     package: '@cypress/react',
+    defaultPackagePath: '@cypress/react/plugins/next',
     glob: '*.{jsx,tsx}',
     deps: ['next', 'react', 'react-dom'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[0],
@@ -89,6 +94,7 @@ export const FRONTEND_FRAMEWORKS = [
     name: 'Nuxt.js',
     supportedBundlers: ['webpack'],
     package: '@cypress/vue',
+    defaultPackagePath: null,
     glob: '*.vue',
     deps: ['nuxt'],
     category: FRONTEND_FRAMEWORK_CATEGORIES[1],

system-tests/__snapshots__/devServer_dynamic_support.ts.js

@@ -0,0 +1,18 @@
+exports['devServer dynamic import throws error when devServer use dynamic import instead of require 1'] = `
+The \`component\`.\`devServer\` method must be a function with the following signature:
+
+\`\`\`
+devServer: (cypressDevServerConfig, devServerConfig) {
+  // start dev server here
+}
+\`\`\`
+
+Learn more: https://on.cypress.io/dev-server
+
+We loaded the \`devServer\` from: \`/foo/bar/.projects/devServer-dynamic-import/cypress.config.js\`
+
+It exported:
+
+ {"supportFile":false,"devServer":{},"devServerConfig":{"webpackFilename":"webpack.config.js"}}
+
+`

system-tests/projects/component-tests/cypress.config.js

@@ -5,10 +5,10 @@ module.exports = {
   },
   component: {
     specPattern: 'cypress/component-tests/**/*',
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
-      return startDevServer({ options: cypressConfig, ...devServerConfig })
+      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
     },
     devServerConfig: {
       webpackConfig: {

system-tests/projects/cypress-in-cypress/cypress.config.js

@@ -1,10 +1,12 @@
+const { devServer } = require('@cypress/react/plugins/load-webpack')
+
 module.exports = {
   projectId: 'abc123',
   experimentalInteractiveRunEvents: true,
   component: {
     specPattern: 'src/**/*.{spec,cy}.{js,ts,tsx,jsx}',
     supportFile: false,
-    devServer: require('@cypress/react/plugins/load-webpack'),
+    devServer,
     devServerConfig: {
       webpackFilename: 'webpack.config.js',
     },

system-tests/projects/devServer-dynamic-import/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "parser": "babel-eslint"
+}

system-tests/projects/devServer-dynamic-import/cypress.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  component: {
+    supportFile: false,
+    devServer: import('@cypress/react/plugins/load-webpack/index.js'),
+    devServerConfig: {
+      webpackFilename: 'webpack.config.js',
+    },
+  },
+}

system-tests/projects/e2e/cypress.config.js

@@ -10,10 +10,10 @@ module.exports = {
   'component': {
     'supportFile': false,
     'specPattern': 'cypress/component/**/*spec.js',
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
-      return startDevServer({ options: cypressConfig, ...devServerConfig })
+      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
     },
     devServerConfig: {
       webpackConfig: {

system-tests/projects/no-specs-custom-pattern/cypress.config.js

@@ -1,8 +1,10 @@
+const { devServer } = require('@cypress/react/plugins/load-webpack')
+
 module.exports = {
   component: {
     supportFile: false,
     specPattern: 'src/specs-folder/*.cy.{js,jsx}',
-    devServer: require('@cypress/react/plugins/load-webpack'),
+    devServer,
     devServerConfig: {
       webpackFilename: 'webpack.config.js',
     },

system-tests/projects/no-specs-no-storybook/cypress.config.js

@@ -1,7 +1,9 @@
+const { devServer } = require('@cypress/react/plugins/load-webpack')
+
 module.exports = {
   component: {
     supportFile: false,
-    devServer: require('@cypress/react/plugins/load-webpack'),
+    devServer,
     devServerConfig: {
       webpackFilename: 'webpack.config.js',
     },

system-tests/projects/no-specs/cypress.config.js

@@ -1,7 +1,9 @@
+const { devServer } = require('@cypress/react/plugins/load-webpack')
+
 module.exports = {
   component: {
     supportFile: false,
-    devServer: require('@cypress/react/plugins/load-webpack'),
+    devServer,
     devServerConfig: {
       webpackFilename: 'webpack.config.js',
     },

system-tests/projects/react-code-gen/cypress.config.js

@@ -2,10 +2,10 @@ module.exports = {
   component: {
     supportFile: 'cypress/component/support.js',
     specPattern: 'src/**/*.cy.{js,jsx}',
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
-      return startDevServer({ options: cypressConfig, ...devServerConfig })
+      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
     },
   },
   e2e: {

system-tests/projects/simple-ct/cypress.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   'component': {
     supportFile: false,
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig: {
           output: {
             publicPath: '/',

system-tests/projects/spec-generation/cypress.config.js

@@ -2,10 +2,10 @@ module.exports = {
   'componentFolder': 'src',
   'component': {
     'supportFile': false,
-    devServer (cypressConfig, devServerConfig) {
+    devServer (cypressDevServerConfig, devServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
-      return startDevServer({ options: cypressConfig, ...devServerConfig })
+      return startDevServer({ options: cypressDevServerConfig, ...devServerConfig })
     },
     devServerConfig: {
       webpackConfig: {

system-tests/projects/unify-onboarding-with-config/cypress.config.js

@@ -3,11 +3,11 @@ module.exports = {
     supportFile: false,
     testFiles: '**/*cy-spec.{js,jsx,ts,tsx}',
     componentFolder: 'src',
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig: {
           output: {
             publicPath: '/',

system-tests/projects/unify-onboarding/cypress.config.js

@@ -1,10 +1,10 @@
 module.exports = {
   'component': {
-    devServer (cypressConfig) {
+    devServer (cypressDevServerConfig) {
       const { startDevServer } = require('@cypress/webpack-dev-server')
 
       return startDevServer({
-        options: cypressConfig,
+        options: cypressDevServerConfig,
         webpackConfig: {
           output: {
             publicPath: '/',

system-tests/test/devServer_dynamic_support.ts

@@ -0,0 +1,14 @@
+import systemTests from '../lib/system-tests'
+
+describe('devServer dynamic import', function () {
+  systemTests.setup()
+
+  it('throws error when devServer use dynamic import instead of require', function () {
+    return systemTests.exec(this, {
+      project: 'devServer-dynamic-import',
+      testingType: 'component',
+      expectedExitCode: 1,
+      snapshot: true,
+    })
+  })
+})