Error with cypress e2e test after dependency update

[maumau27]

I encountered an error when running e2e test unit after an update of a dependency.
I was using @cypress ^13.0.0; that was using @cypress/request 3.0.5 as a dependency.
Two days ago, I started having problems. I found that the dependency @cypress/request changed to 3.0.6.
And by forcing the use of @cypress/request 3.0.5, the error was fixed.
I noticed that the dependency tough-cookie changed from 4.1.3 to 5.0.0.

The error was the following:

Error: Webpack Compilation Error
Module build failed: UnhandledSchemeError: Reading from "node:url" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at handle (dist/my-app/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (dist/my-app/node_modules/webpack/lib/Compiler.js:498:32)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:576:17
    at dist/my-app/node_modules/webpack/lib/HookWebpackError.js:67:2
    at Hook.eval [as callAsync] (eval at create (dist/my-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (dist/my-app/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (dist/my-app/node_modules/webpack/lib/Cache.js:126:37)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:572:19
    at Hook.eval [as callAsync] (eval at create (dist/my-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (dist/my-app/node_modules/tapable/lib/Hook.js:18:14)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:568:23
    at Compiler.emitRecords (dist/my-app/node_modules/webpack/lib/Compiler.js:1044:4)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:558:11
    at dist/my-app/node_modules/webpack/lib/Compiler.js:1007:14
    at Hook.eval [as callAsync] (eval at create (dist/my-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (dist/my-app/node_modules/tapable/lib/Hook.js:18:14)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:1004:27
    at dist/my-app/node_modules/neo-async/async.js:2818:7
    at done (dist/my-app/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (dist/my-app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (dist/my-app/node_modules/tapable/lib/Hook.js:18:14)
    at dist/my-app/node_modules/webpack/lib/Compiler.js:833:33
    at dist/my-app/node_modules/graceful-fs/graceful-fs.js:143:16
    at dist/.cache/Cypress/13.0.0/Cypress/resources/app/node_modules/@packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at dist/.cache/Cypress/13.0.0/Cypress/resources/app/node_modules/@packages/server/node_modules/graceful-fs/graceful-fs.js:143:16
    at dist/.cache/Cypress/13.0.0/Cypress/resources/app/node_modules/@packages/server/node_modules/graceful-fs/graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:192:23)

My WebPack config is:

module.exports = (on, config) => {
    const webpackPreprocessor = require('@cypress/webpack-batteries-included-preprocessor');
    const webpackOptions = webpackPreprocessor.defaultOptions.webpackOptions;

    webpackOptions.module.rules.unshift({
        test: /\.m?js$/,
        resolve: {
            fullySpecified: false,
        },
        use: {
            loader: 'babel-loader',
            options: {
                plugins: ['@angular/compiler-cli/linker/babel'],
                compact: false,
                cacheDirectory: true,
            },
        },
    });

    webpackOptions.module.rules.unshift({
        test: /\.node$/,
        resolve: {
            fullySpecified: false,
        },
        use: {
            loader: 'node-loader',
        },
    });

    on(
        'file:preprocessor',
        webpackPreprocessor({
            webpackOptions: webpackOptions,
            typescript: require.resolve('typescript'),
        })
    );

    return config;
};

[MikeMcC399]

@maumau27

Could you add information about the versions of other dependencies you are using:

@angular
webpack

etc.

If the release of @cypress/[email protected] is causing a breaking change, it may need to be reverted and the change re-released as @cypress/[email protected] instead

[maumau27]

@MikeMcC399

Here is the information.

"dependencies": {
        "@angular/animations": "^14.3.0",
        "@angular/cdk": "~14.2.7",
        "@angular/common": "^14.3.0",
        "@angular/compiler": "^14.3.0",
        "@angular/core": "^14.3.0",
        "@angular/forms": "^14.3.0",
        "@angular/localize": "^14.3.0",
        "@angular/platform-browser": "^14.3.0",
        "@angular/platform-browser-dynamic": "^14.3.0",
        "@angular/router": "^14.3.0",
        "@ng-bootstrap/ng-bootstrap": "~13.1.1",
        "@popperjs/core": "^2.10.2",
        "@swimlane/ngx-datatable": "~20.1.0",
        "angular-split": "^13.0.0",
        "bootstrap": "~5.2.0",
        "fabric": "^4.4.0",
        "ngx-color-picker": "^12.0.1",
        "ngx-mask": "^13.0.0",
        "rxjs": "^7.4.0",
        "tslib": "^2.0.0",
        "zone.js": "~0.11.4"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~14.2.9",
        "@angular-devkit/core": "~14.2.9",
        "@angular-devkit/schematics": "~14.2.9",
        "@angular-eslint/builder": "14.0.0",
        "@angular-eslint/eslint-plugin": "14.0.0",
        "@angular-eslint/eslint-plugin-template": "14.0.0",
        "@angular-eslint/schematics": "14.0.0",
        "@angular-eslint/template-parser": "14.0.0",
        "@angular/cli": "^14.2.13",
        "@angular/compiler-cli": "^14.3.0",
        "@babel/core": "^7.24.4",
        "@babel/preset-env": "^7.24.4",
        "@cypress/webpack-batteries-included-preprocessor": "^3.0.2",
        "@cypress/webpack-preprocessor": "^5.4.4",
        "@stomp/stompjs": "^6.1.0",
        "@types/fabric": "^4.2.5",
        "@types/jasmine": "^4.0.0",
        "@types/jasminewd2": "~2.0.3",
        "@types/lodash-es": "^4.17.4",
        "@types/node": "^16.0.0",
        "@types/resize-observer-browser": "^0.1.7",
        "@types/webpack": "^5.28.0",
        "@typescript-eslint/eslint-plugin": "^6.21.0",
        "@typescript-eslint/parser": "^6.21.0",
        "angular-in-memory-web-api": "^0.14.0",
        "babel-loader": "^9.1.3",
        "codelyzer": "^6.0.0",
        "cypress": "~13.0.0",
        "electron": "22.0.0",
        "electron-builder": "24.9.1",
        "electron-reload": "^1.5.0",
        "eslint": "^7.6.0",
        "eslint-config-prettier": "^8.3.0",
        "eslint-plugin-import": "2.22.1",
        "eslint-plugin-jasmine": "^4.1.3",
        "eslint-plugin-jsdoc": "30.7.6",
        "eslint-plugin-prefer-arrow": "1.2.2",
        "eslint-plugin-prettier": "^4.0.0",
        "jasmine-core": "~5.1.1",
        "jasmine-spec-reporter": "~5.0.0",
        "jquery": "^3.5.1",
        "karma": "^6.3.16",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "~3.0.2",
        "karma-jasmine": "^4.0.0",
        "karma-jasmine-html-reporter": "^1.7.0",
        "lodash-es": "^4.17.21",
        "moment": "^2.29.1",
        "ng-mocks": "^14.12.1",
        "node-loader": "^2.0.0",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.5.1",
        "prettier-plugin-organize-imports": "^2.3.4",
        "sockjs-client": "^1.6.1",
        "start-server-and-test": "^1.12.0",
        "ts-node": "~8.3.0",
        "typescript": "~4.8.4",
        "wait-on": "^5.2.1",
        "webpack": "^5.91.0"
    }

[MikeMcC399]

@maumau27

Thanks for the version information! It seems you are using Angular 14, for example "@angular/core": "^14.3.0"

According to https://angular.dev/reference/releases#actively-supported-versions

Angular versions v2 to v15 are no longer supported.

I'm looking to see if the issue is reproducible using supported versions of Angular.

[maumau27]

@MikeMcC399

Thanks for looking into it.
I will update the Angular version in the future.
In the mean time, I'm using version 3.0.5 of @cypress/request.
In case you re-release the version, I can revert that change.

[MikeMcC399]

@maumau27

Thanks for looking into it. I will update the Angular version in the future.

Good idea!

(Unrelated, but I also notice that you're using an unsupported version ESLint v7, where currently ESLint v9 is the minimum.)

In the mean time, I'm using version 3.0.5 of @cypress/request.

Also good!

In case you re-release the version, I can revert that change.

I can't speak for the Cypress.io team who own the package, as I'm external. I guess it will depend if there are significant compatibility issues reported by other users with supported dependencies. The update resolved a deprecation issue, so it was a necessary step forward. Anyway it is good that you reported your issue!

[maumau27]

@MikeMcC399

Thanks for the support.

(Unrelated, but I also notice that you're using an unsupported version ESLint v7, where currently ESLint v9 is the minimum.)

I will be looking into that. Thanks for the notice.

I can't speak for the Cypress.io team who own the package, as I'm external. I guess it will depend if there are significant compatibility issues reported by other users with supported dependencies. The update resolved a deprecation issue, so it was a necessary step forward. Anyway it is good that you reported your issue!

Okay, I will be monoriting to see if there are any changes to the version.
Did you manage to reproduce the error in a supported version of angular?

Thanks again for the quick response.

[MikeMcC399]

@maumau27

Could you please say which version of Node.js you are using? Note that Cypress is aligned with Node.js releases and needs a minimum Node.js 18.x

According to https://angular.dev/reference/versions#unsupported-angular-versions Angular 14 needs Node.js 14 or 16 and these are no longer supported by Cypress.

[maumau27]

@MikeMcC399

I'm using node 16.18.1.

According to https://angular.dev/reference/versions#unsupported-angular-versions Angular 14 needs Node.js 14 or 16 and these are no longer supported by Cypress.

I see, that's okay. Until I make the upgrade to a newer version of Angular, I can use the fixed version of @cypress/resources.
I wanted to report the issue just in case.