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

Author: estrada9166

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,22 +4,22 @@ 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')
 
       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,11 +1,12 @@
 const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/react/plugins/react-scripts')
 
 module.exports = defineConfig({
   'video': false,
   'viewportWidth': 500,
   '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,12 +1,13 @@
 const { defineConfig } = require('cypress')
+const { devServer } = require('@cypress/react/plugins/load-webpack')
 
 module.exports = defineConfig({
   'video': false,
   'fixturesFolder': false,
   '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,15 +348,14 @@ const E2E_SCAFFOLD_BODY = dedent`
 
 interface ComponentScaffoldOpts {
   lang: CodeLanguageEnum
-  requirePath: string
   configOptionsString: string
   specPattern?: string
 }
 
 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,
       })
     },
   },