Writing Javascript in commands doesnt work

[chriseugenerodriguez]

Current behavior

Error: Webpack Compilation Error
Module not found: Error: Can't resolve 'rxjs/operators' in 'C:\Users\v-christrodr\OneDrive - Microsoft\Documents\QaaS-Portal\node_modules\@angular\core\fesm2020'
Did you mean 'index.js'?
BREAKING CHANGE: The request 'rxjs/operators' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
    at Watching.handle [as handler] (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:212:23)
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Watching.js:303:9
    at Hook.eval [as callAsync] (eval at create (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at Watching._done (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Watching.js:299:28)
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Watching.js:213:21
    at Compiler.emitRecords (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:919:5)
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Watching.js:191:22
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:882:27
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
    at alreadyWritten (C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:714:8)
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:802:19
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:123:16
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:123:16
    at C:\Users\v-christrodr\AppData\Local\Cypress\Cache\13.6.4\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)

Desired behavior

Need to login to Microsoft AD, using msal browser extension for this.

Test code to reproduce

Here is the code I got from an article.

/// <reference types="cypress" />
import { ExternalTokenResponse } from '@azure/msal-browser';
import { decode, JwtPayload } from 'jsonwebtoken';
import { environment } from '../../src/environments/environment';

const injectTokens = (tokenResponse: ExternalTokenResponse) => {
	const url = 'login.windows.net';
	const idTokenClaims: JwtPayload = decode(tokenResponse.id_token);
	const localAccountId = idTokenClaims.oid || idTokenClaims.sid;
	const clientId = environment.auth.clientId;
	const realm = environment.auth.tenant;
	const homeAccountId = `${localAccountId}.${realm}`;

	setSessionToken({
		homeAccountId,
		url,
		realm,
		idTokenClaims,
		localAccountId,
	});

	setSessionAccessToken({
		homeAccountId,
		url,
		tokenResponse,
		realm,
		clientId,
	});
};

const setSessionToken = ({
	homeAccountId,
	url,
	realm,
	idTokenClaims,
	localAccountId,
}: {
	homeAccountId: string;
	url: string;
	realm: string;
	localAccountId: string;
	idTokenClaims: any;
}) => {
	const tokenId = `${homeAccountId}-${url}-${realm}`;
	const token = {
		authorityType: 'MSSTS',
		homeAccountId,
		url,
		realm,
		idTokenClaims,
		localAccountId,
		username: idTokenClaims.preferred_username,
		name: idTokenClaims.name,
	};

	sessionStorage.setItem(tokenId, JSON.stringify(token));
};

const setSessionAccessToken = ({
	homeAccountId,
	url,
	tokenResponse,
	realm,
	clientId,
}: {
	homeAccountId: string;
	url: string;
	tokenResponse: any;
	realm: string;
	clientId: string;
}) => {
	const now = Math.floor(Date.now() / 1000);
	const accessTokenId = `${homeAccountId}-${url}-
	accesstoken-${environment.auth.clientId}-${environment.auth.tenant}-${tokenResponse.scope}--`;
	const accessToken = {
		credentialType: 'AccessToken',
		tokenType: 'Bearer',
		homeAccountId,
		secret: tokenResponse.access_token,
		cachedAt: now.toString(),
		expiresOn: (now + tokenResponse.expires_in).toString(),
		extendedExpiresOn: (now + tokenResponse.ext_expires_in).toString(),
		url,
		target: tokenResponse.scope,
		realm,
		clientId,
	};
	sessionStorage.setItem(accessTokenId, JSON.stringify(accessToken));
};

Cypress.Commands.add('login', () => {
	cy.request({
		method: 'POST',
		url: `https://login.microsoftonline.com/${environment.auth.tenant},
		)}/oauth2/v2.0/token`,
		form: true,
		body: {
			client_id: environment.auth.clientId,
			scope: environment.auth.defaultScopes,
			navigateToLoginRequestUrl: true,
			redirectUri: '/callback',
		},
	}).then((response) => {
		injectTokens(response.body);
	});
});

Cypress Version

13.6.4

Node version

18.2

Operating System

windows 13

Debug Logs

No response

Other

cypress.config

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  reporter: "junit",

  reporterOptions: {
    mochaFile: "reports/cypress.xml",
    toConsole: true,
  },

  viewportWidth: 1280,
  viewportHeight: 720,
  projectId: 'ggqz18',

  e2e: {
    baseUrl: 'http://localhost:4200',
    experimentalModifyObstructiveThirdPartyCode: true,
  },

  component: {
    devServer: {
      framework: 'angular',
      bundler: 'webpack',
    },
    specPattern: '**/*.cy.ts',
  },
});

I tells me to write in package.json type: module, but that breaks the cypress to run anyway. the error resolution leads to another error.

[cypress-app-bot]

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

[cypress-app-bot]

This issue has been closed due to inactivity.