Angular 19 upgrade causes component test config failure: Error: Unexpected major version of webpack-dev-server. Cypress webpack-dev-server works with webpack-dev-server versions 3, 4 - saw 5.1.0

[abf7d]

Current behavior

I recently upgraded my Angular version from 17 to 19 and my Cypress test setup broke. I use cypress-real-events and cypress-image-snapshot. Below is the first error I got:

TypeError: The "paths[1]" argument must be of type string. Received an instance of Object
    at validateString (node:internal/validators:162:11)
    at Object.resolve (node:path:1101:7)
    at getCommonConfig (/app/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/common.js:280:24)
    at async Promise.all (index 0)
    at async generateWebpackConfig (/app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:64:22)
    at async generateBrowserWebpackConfigFromContext (/app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:119:20)
    at async getAngularCliWebpackConfig (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:165:24)
    at async angularHandler (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:205:27)
    at async getPreset (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:94:20)
    at async Function.devServer.create (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:61)
    at async /root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:24

I found this issue and followed the work around. Here is my cypress.config.ts:

import { addMatchImageSnapshotPlugin } from '@simonsmith/cypress-image-snapshot/plugin';

export default defineConfig({
    component: {
        supportFile: 'cypress/support/component.ts',
        devServer: {
            framework: 'angular',
            bundler: 'webpack',
        },
        setupNodeEvents(on, config) {
            on('task', {
                log(message) {
                    console.log(message);
                    return null;
                },
            });
            addMatchImageSnapshotPlugin(on);
        },
        specPattern: '**/*.cy.ts',
    },
});

Here are my packages and versions:

"@simonsmith/cypress-image-snapshot": "^9.0.1",
"cypress": "^13.6.4",
"cypress-real-events": "^1.12.0",

Trying the fix that my link above pointed to created another error:

Error: Unexpected major version of webpack-dev-server. Cypress webpack-dev-server works with webpack-dev-server versions 3, 4 - saw 5.1.0
    at getMajorVersion (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/sourceRelativeWebpackModules.js:202:15)
    at sourceWebpackDevServer (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/sourceRelativeWebpackModules.js:140:37)
    at sourceDefaultWebpackDependencies (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/sourceRelativeWebpackModules.js:189:30)
    at angularHandler (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:207:142)
    at async getPreset (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:94:20)
    at async Function.devServer.create (/Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:61)
    at async /Users/af/Library/Caches/Cypress/13.6.4/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:24

It looks like the version of webpack-dev-server is not matching. Does anybody have a work around for this?

Desired behavior

Cypress should not fail when running an angular 19 project's component tests.

Test code to reproduce

In an angular 19 project, run

npx cypress open

Select component tests and it breaks

Cypress Version

13.6.4

Node version

22.11.0

Operating System

macOS: 15.1

Debug Logs

TypeError: The "paths[1]" argument must be of type string. Received an instance of Object
    at validateString (node:internal/validators:162:11)
    at Object.resolve (node:path:1101:7)
    at getCommonConfig (/app/node_modules/@angular-devkit/build-angular/src/tools/webpack/configs/common.js:280:24)
    at async Promise.all (index 0)
    at async generateWebpackConfig (/app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:64:22)
    at async generateBrowserWebpackConfigFromContext (/app/node_modules/@angular-devkit/build-angular/src/utils/webpack-browser-config.js:119:20)
    at async getAngularCliWebpackConfig (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:165:24)
    at async angularHandler (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/angularHandler.js:205:27)
    at async getPreset (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:94:20)
    at async Function.devServer.create (/root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:61)
    at async /root/.cache/Cypress/13.6.4/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:24

Other

I'm trying to use the following packages:

"@simonsmith/cypress-image-snapshot": "^9.0.1",
"cypress": "^13.6.4",
"cypress-real-events": "^1.12.0",

[MikeMcC399]

@abf7d

To use Cypress Component Testing with Angular 19 you will need to upgrade to Cypress 14 when it is released.

https://github.com/cypress-io/cypress/blob/develop/cli/CHANGELOG.md shows that it is pending release at the moment.