breaking: dropping support for webpack-dev-server 3 from @cypress/webpack-dev-server and make @cypress/webpack-dev-server ship with webpack-dev-server version 5 by default (from 4)

.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

@@ -13,6 +13,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')