breaking: dropping support for webpack-dev-server 3 from @cypress/web…

…pack-dev-server and make `@cypress/webpack-dev-server` ship with `webpack-dev-server` version 5 by default (from 4) (#30467)

* breaking: dropping support for webpack-dev-server 3 from @cypress/webpack-dev-server

    BREAKING CHANGE: support for webpack-dev-server version 3 has been removed. webpack-dev-server 3 is no longer maintained by the webpack team. To reduce overhead, Cypress is now removing support in Cypress 14.

* update create-react-app-configured/unconfigured

* updated vueclivue2-configured to use vue cli v5

* updated vueclivue2-unconfigured to use vue cli v5

* updated vueclivue3-unconfigured to use vue cli v5

* updated vueclivue3-configured to use vue cli v5

* updated vueclivue3-custom-index-html to use vue cli v5

* update react17 project to use webpack-dev-server v4 (default ships v5 which does not work with webpack 4)

* update react18 project to use webpack-dev-server v4 (default ships v5 which does not work with webpack 4)

* update nuxt version to avoid some issues in the preprocessed webpack config

* update cy in cy component scaffolding tests to run on more suites, as well as skip config warning for outdated vuecli3 as it will throw due to wds being on version 3. this is a VERY old version, and the test needs to be updated to use vuecli5 so we get wds v5 (vuecli5 support will be deprecated)

* no longer support cra v4 and vue/cli-service v4

* remove cra v4 and vue cli service v4 detect tests as they are no longer supported [run ci]

* chore: update cra app custom index to use cra 5 [run ci]

* update protocol spec snapshot [run ci]

* chore: remove stale references to old vuecli system tests [run ci]

* update webpack-dev-server-4 to actually be wds 4 [run ci]

* add changelog entry [run ci]

* update cache key and tests that should not pass [run ci]

* add issue to changelog entry

* no longer clean up default-gateway as it was shipped with webpack-dev-server 4, which is now a dev dependency [run ci]

* fix issues with node-ipc being out of date [run ci]

* move changelog to correct section [run ci]

.circleci/cache-version.txt

@@ -1,3 +1,3 @@
 # Bump this version to force CI to re-create the cache from scratch.
 
-10-28-24
+10-30-24-wds-3-removal

cli/CHANGELOG.md

@@ -14,6 +14,7 @@ _Released 12/3/2024 (PENDING)_
 - The undocumented methods `Cypress.backend('firefox:force:gc')` and `Cypress.backend('log:memory:pressure')` were removed. Addresses [#30222](https://github.com/cypress-io/cypress/issues/30222).
 - Upgraded bundled Node.js version from `18.17.0` to `20.18.0`. Addresses [#29547](https://github.com/cypress-io/cypress/issues/29547).
 - It is no longer possible to make a `fetch` or `XMLHttpRequest` request from the `about:blank` page in Electron (i.e. `cy.window().then((win) => win.fetch('<some-url>')`). You must use `cy.request` instead or perform some form of initial navigation via `cy.visit()`. Addressed in [#29547](https://github.com/cypress-io/cypress/pull/30394).
+- `@cypress/webpack-dev-server` no longer supports `webpack-dev-server` version 3. Additionally, `@cypress/webpack-dev-server` now ships with `webpack-dev-server` version 5 by default. `webpack-dev-server` version 4 will need to be installed along side Cypress if you are still using `webpack` version 4. Addresses [#29308](https://github.com/cypress-io/cypress/issues/29308), [#30347](https://github.com/cypress-io/cypress/issues/30347), and [#30141](https://github.com/cypress-io/cypress/issues/30141).
 
 **Bugfixes:**
 

npm/webpack-dev-server/README.md

@@ -47,10 +47,9 @@ This module should be primarily covered by system-tests / open-mode tests. All s
 
 `webpack${major}_wds${devServerMajor}-$framework{-$variant}`
 
-- webpack4_wds3-react
+- webpack4_wds4-react
 - webpack5_wds5-react
 - webpack4_wds4-next-11
-- webpack5_wds3-next-12
 - webpack4_wds4-create-react-app
 
 ## Architecture
@@ -69,7 +68,8 @@ We then merge the sourced config with the user's webpack config, and layer on ou
 | --------------------------- | ------- |
 | <= v1                       | <= v9   |
 | >= v2                       | >= v10  |
-| >= v4                       | >= v13  |
+| >= v3                       | >= v13  |
+| >= v4                       | >= v14  |
 
 ## License
 

npm/webpack-dev-server/__snapshots__/makeWebpackConfig.spec.ts.js

@@ -4,7 +4,6 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
     'filename': '[name].js',
   },
   'devServer': {
-    'magicHtml': true,
     'client': {
       'progress': false,
       'overlay': false,
@@ -25,37 +24,12 @@ exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `dev
   ],
 }
 
-exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v3 1'] = {
-  'output': {
-    'publicPath': '/test-public-path/',
-    'filename': '[name].js',
-  },
-  'devServer': {
-    'progress': true,
-    'overlay': false,
-  },
-  'optimization': {
-    'noEmitOnErrors': false,
-    'sideEffects': false,
-    'splitChunks': {
-      'chunks': 'all',
-    },
-  },
-  'devtool': 'inline-source-map',
-  'mode': 'development',
-  'plugins': [
-    'HtmlWebpackPlugin',
-    'CypressCTWebpackPlugin',
-  ],
-}
-
 exports['makeWebpackConfig ignores userland webpack `output.publicPath` and `devServer.overlay` with webpack-dev-server v5 1'] = {
   'output': {
     'publicPath': '/test-public-path/',
     'filename': '[name].js',
   },
   'devServer': {
-    'magicHtml': true,
     'client': {
       'progress': false,
       'overlay': false,

npm/webpack-dev-server/cypress/e2e/create-react-app.cy.ts

@@ -1,7 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_REACT: ProjectFixtureDir[] = ['cra-4', 'cra-5', 'cra-ejected']
+const WEBPACK_REACT: ProjectFixtureDir[] = ['cra-5', 'cra-ejected']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

npm/webpack-dev-server/cypress/e2e/react.cy.ts

@@ -4,7 +4,7 @@ import dedent from 'dedent'
 
 type ProjectDirs = typeof fixtureDirs
 
-const WEBPACK_REACT: ProjectDirs[number][] = ['webpack4_wds3-react', 'webpack4_wds4-react', 'webpack5_wds3-react', 'webpack5_wds4-react', 'webpack5_wds5-react']
+const WEBPACK_REACT: ProjectDirs[number][] = ['webpack4_wds4-react', 'webpack5_wds4-react', 'webpack5_wds5-react']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectDirs[number][] = []

npm/webpack-dev-server/cypress/e2e/vue-cli.cy.ts

@@ -1,7 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const PROJECTS: ProjectFixtureDir[] = ['vuecli4-vue2', 'vuecli4-vue3', 'vuecli5-vue3', 'vuecli5-vue3-type-module']
+const PROJECTS: ProjectFixtureDir[] = ['vuecli5-vue3', 'vuecli5-vue3-type-module']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

npm/webpack-dev-server/package.json

@@ -25,14 +25,13 @@
     "semver": "^7.5.3",
     "speed-measure-webpack-plugin": "1.4.2",
     "tslib": "^2.3.1",
-    "webpack-dev-server": "^4.15.2",
+    "webpack-dev-server": "^5.1.0",
     "webpack-merge": "^5.4.0"
   },
   "devDependencies": {
     "@types/node": "20.16.0",
     "@types/proxyquire": "^1.3.28",
     "@types/speed-measure-webpack-plugin": "^1.3.4",
-    "@types/webpack-dev-server-3": "npm:@types/webpack-dev-server@^3",
     "chai": "^4.3.6",
     "dedent": "^0.7.0",
     "mocha": "^9.2.2",
@@ -42,8 +41,7 @@
     "ts-node": "^10.9.2",
     "webpack": "npm:webpack@^5",
     "webpack-4": "npm:webpack@^4",
-    "webpack-dev-server-3": "npm:webpack-dev-server@^3",
-    "webpack-dev-server-5": "npm:webpack-dev-server@^5"
+    "webpack-dev-server-4": "npm:webpack-dev-server@^4"
   },
   "files": [
     "dist"

npm/webpack-dev-server/src/createWebpackDevServer.ts

@@ -1,8 +1,6 @@
 import debugLib from 'debug'
-import type { Configuration as WebpackDevServer3Configuration } from 'webpack-dev-server-3'
-import type { Configuration as WebpackDevServer4Configuration } from 'webpack-dev-server'
-import type { Configuration as WebpackDevServer5Configuration } from 'webpack-dev-server-5'
-
+import type { Configuration as WebpackDevServer5Configuration } from 'webpack-dev-server'
+import type { Configuration as WebpackDevServer4Configuration } from 'webpack-dev-server-4'
 import type { WebpackDevServerConfig } from './devServer'
 import type { SourceRelativeWebpackResult } from './helpers/sourceRelativeWebpackModules'
 import { makeWebpackConfig } from './makeWebpackConfig'
@@ -59,12 +57,6 @@ export async function createWebpackDevServer (
     return webpackDevServer4(config, webpackCompiler, finalWebpackConfig)
   }
 
-  if (webpackDevServerMajorVersion === 3) {
-    debug('using webpack-dev-server v3')
-
-    return webpackDevServer3(config, webpackCompiler, finalWebpackConfig)
-  }
-
   throw new Error(`Unsupported webpackDevServer version ${webpackDevServerMajorVersion}`)
 }
 
@@ -132,32 +124,3 @@ function webpackDevServer4 (
     compiler,
   }
 }
-
-function webpackDevServer3 (
-  config: CreateFinalWebpackConfig,
-  compiler: object,
-  finalWebpackConfig: Record<string, any>,
-) {
-  const { devServerConfig: { cypressConfig: { devServerPublicPathRoute } } } = config
-  const isOpenMode = !config.devServerConfig.cypressConfig.isTextTerminal
-  const WebpackDevServer = config.sourceWebpackModulesResult.webpackDevServer.module
-  const webpackDevServerConfig: WebpackDevServer3Configuration = {
-    // @ts-ignore
-    ...finalWebpackConfig.devServer ?? {},
-    hot: false,
-    // @ts-ignore ignore webpack-dev-server v3 type errors
-    inline: false,
-    publicPath: devServerPublicPathRoute,
-    noInfo: false,
-    stats: finalWebpackConfig.stats ?? 'minimal',
-    // Only enable file watching & reload when executing tests in `open` mode
-    liveReload: isOpenMode,
-  }
-
-  const server = new WebpackDevServer(compiler, webpackDevServerConfig)
-
-  return {
-    server,
-    compiler,
-  }
-}

npm/webpack-dev-server/src/devServer.ts

@@ -1,12 +1,12 @@
 /// <reference types="cypress" />
 
-import type WebpackDevServer from 'webpack-dev-server'
+import type WebpackDevServer5 from 'webpack-dev-server'
+import type WebpackDevServer4 from 'webpack-dev-server-4'
+
 import type { Compiler, Configuration } from 'webpack'
 
 import { createWebpackDevServer } from './createWebpackDevServer'
-import type { AddressInfo } from 'net'
 import debugLib from 'debug'
-import type { Server } from 'http'
 import { vueCliHandler } from './helpers/vueCliHandler'
 import { nuxtHandler } from './helpers/nuxtHandler'
 import { createReactAppHandler } from './helpers/createReactAppHandler'
@@ -43,12 +43,12 @@ export type WebpackDevServerConfig = {
  * @internal
  */
 type DevServerCreateResult = {
-  version: 3
-  server: Server
+  version: 4
+  server: WebpackDevServer4
   compiler: Compiler
 } | {
-  version: 4
-  server: WebpackDevServer
+  version: 5
+  server: WebpackDevServer5
   compiler: Compiler
 }
 
@@ -64,34 +64,6 @@ export function devServer (devServerConfig: WebpackDevServerConfig): Promise<Cyp
   return new Promise(async (resolve, reject) => {
     const result = await devServer.create(devServerConfig) as DevServerCreateResult
 
-    // @ts-expect-error
-    const { port } = result.server?.options
-
-    if (result.version === 3) {
-      const srv = result.server.listen(port || 0, '127.0.0.1', () => {
-        const port = (srv.address() as AddressInfo).port
-
-        debug('Component testing webpack server 3 started on port %s', port)
-
-        resolve({
-          port,
-          // Close is for unit testing only. We kill this child process which will handle the closing of the server
-          close: (done) => {
-            srv.close((err) => {
-              if (err) {
-                debug('closing dev server, with error', err)
-              }
-
-              debug('closed dev server')
-              done?.(err)
-            })
-          },
-        })
-      })
-
-      return
-    }
-
     result.server.start().then(() => {
       if (!result.server.options.port) {
         return reject(new Error(`Expected port ${result.server.options.port} to be a number`))

npm/webpack-dev-server/src/helpers/sourceRelativeWebpackModules.ts

@@ -37,7 +37,7 @@ export interface SourcedWebpackDevServer extends SourcedDependency {
   module: {
     new (...args: unknown[]): unknown
   }
-  majorVersion: 3 | 4 | 5
+  majorVersion: 4 | 5
 }
 
 export interface SourcedHtmlWebpackPlugin extends SourcedDependency {
@@ -214,7 +214,7 @@ export function sourceWebpackDevServer (config: WebpackDevServerConfig, webpackM
   webpackDevServer.importPath = path.dirname(webpackDevServerJsonPath)
   webpackDevServer.packageJson = require(webpackDevServerJsonPath)
   webpackDevServer.module = require(webpackDevServer.importPath)
-  webpackDevServer.majorVersion = getMajorVersion(webpackDevServer.packageJson, [3, 4, 5])
+  webpackDevServer.majorVersion = getMajorVersion(webpackDevServer.packageJson, [4, 5])
 
   debug('WebpackDevServer: Successfully sourced webpack-dev-server - %o', webpackDevServer)
   if (webpackMajorVersion < 5 && webpackDevServer.majorVersion === 5) {

npm/webpack-dev-server/src/makeDefaultWebpackConfig.ts

@@ -109,18 +109,6 @@ export function makeCypressWebpackConfig (
     }
   }
 
-  if (webpackDevServerMajorVersion === 5) {
-    return {
-      ...finalConfig,
-      devServer: {
-        port: webpackDevServerPort,
-        client: {
-          overlay: false,
-        },
-      },
-    }
-  }
-
   if (webpackDevServerMajorVersion === 4) {
     return {
       ...finalConfig,
@@ -133,12 +121,14 @@ export function makeCypressWebpackConfig (
     }
   }
 
-  // @ts-ignore
+  // default is webpack-dev-server v5
   return {
     ...finalConfig,
     devServer: {
       port: webpackDevServerPort,
-      overlay: false,
+      client: {
+        overlay: false,
+      },
     },
   }
 }

npm/webpack-dev-server/test/devServer-unit.spec.ts

@@ -14,28 +14,6 @@ const cypressConfig = {
 describe('devServer', function () {
   this.timeout(10 * 1000)
 
-  it('creates a new devServer webpack4, webpackDevServer3', async () => {
-    const { devServer } = proxyquire('../src/devServer', {
-      './helpers/sourceRelativeWebpackModules': {
-        sourceDefaultWebpackDependencies: () => {
-          return createModuleMatrixResult({
-            webpack: 4,
-            webpackDevServer: 3,
-          })
-        } },
-    }) as typeof import('../src/devServer')
-
-    const result = await devServer.create({
-      specs: [],
-      cypressConfig,
-      webpackConfig: {},
-      devServerEvents: new EventEmitter(),
-    })
-
-    expect(result.server).to.be.instanceOf(require('webpack-dev-server-3'))
-    expect(result.version).to.eq(3)
-  })
-
   it('creates a new devServer webpack4, webpackDevServer4', async () => {
     const { devServer } = proxyquire('../src/devServer', {
       './helpers/sourceRelativeWebpackModules': {
@@ -54,7 +32,7 @@ describe('devServer', function () {
       devServerEvents: new EventEmitter(),
     })
 
-    expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
+    expect(result.server).to.be.instanceOf(require('webpack-dev-server-4'))
     expect(result.version).to.eq(4)
   })
 
@@ -76,7 +54,7 @@ describe('devServer', function () {
       devServerEvents: new EventEmitter(),
     })
 
-    expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
+    expect(result.server).to.be.instanceOf(require('webpack-dev-server-4'))
     expect(result.version).to.eq(4)
   })
 
@@ -98,7 +76,7 @@ describe('devServer', function () {
       devServerEvents: new EventEmitter(),
     })
 
-    expect(result.server).to.be.instanceOf(require('webpack-dev-server-5'))
+    expect(result.server).to.be.instanceOf(require('webpack-dev-server'))
     expect(result.version).to.eq(5)
   })
 })

npm/webpack-dev-server/test/handlers/createReactAppHandler.spec.ts

@@ -50,25 +50,6 @@ const expectReactScriptsFiveModifications = (webpackConfig: Configuration) => {
 describe('createReactAppHandler', function () {
   this.timeout(1000 * 60)
 
-  it('sources the config from react-scripts v4', async () => {
-    const projectRoot = await scaffoldMigrationProject('cra-4')
-
-    process.chdir(projectRoot)
-
-    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = createReactAppHandler({
-      cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
-      framework: 'create-react-app',
-    } as WebpackDevServerConfig)
-
-    expect(webpackConfig.mode).eq('development')
-    expectEslintModifications(webpackConfig)
-    expectModuleSourceInPlaceModifications(webpackConfig, projectRoot)
-    expectBabelRuleModifications(webpackConfig, projectRoot)
-
-    expect(sourceWebpackModulesResult.framework?.importPath).to.include('react-scripts')
-    expect(sourceWebpackModulesResult.webpack.majorVersion).eq(4)
-  })
-
   it('sources the config from react-scripts v5', async () => {
     const projectRoot = await scaffoldMigrationProject('cra-5')