Upgrade to 13.4.0 causes webpack compilation error

Current behavior

Getting below error while upgrading 12.12.0 to 13.13.0

PS C:\Users\Vinit.kumar\source\Repos1\project> yarn nx run e2e-test:life-agent
yarn run v1.22.19
$ C:\Users\Vinit.kumar\source\Repos1\project\node_modules\.bin\nx run e2e-test:life-agent

> nx run e2e-test:life-agent

DevTools listening on ws://xxx.x.x.x:xxxxx/devtools/browser/fe03d592-2cee-41c8-82db-b36bb2177d0b
@cypress/grep: will omit filtered tests
grep and/or grepTags has eliminated all specs
Will leave all specs to run to filter at run-time
Running Portal on the following URL:
Cypress detected policy settings on your computer that may cause issues.

The following policies were detected that may prevent Cypress from automating Chrome:

 - HKEY_LOCAL_MACHINE\Software\Policies\Google\Chrome\ExtensionSettings

For more information, see https://on.cypress.io/bad-browser-policy
====================================================================================================
  (Run Starting)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐       
  │ Cypress:        13.13.0                                                                        │       
  │ Browser:        Electron 118 (headless)                                                        │       
  │ Node Version:   v20.11.1 (C:\Program Files\nodejs\node.exe)                                    │       
  │ Specs:          1 found (app.cy.ts)                                                            │       
  │ Searched:       src/**/*.cy.{js,jsx,ts,tsx}                                                    │       
  └────────────────────────────────────────────────────────────────────────────────────────────────┘       
Writing credentials to: C:\Users\Vinit.kumar\source\Repos1\project\apps\e2e-test\life-agent\src\fixtures\userdata.json
Reading credentials from: C:\Users\Vinit.kumar\source\Repos1\project\apps\e2e-test\life-agent\src\fixtures\credentials.json
────────────────────────────────────────────────────────────────────────────────────────────────────       

  Running:  app.cy.ts                                                                       (1 of 1)       
Oops...we found an error preparing this test file:

  > src\support\e2e.ts

The error was:

Error: Webpack Compilation Error
Module parse failed: Unexpected token (3:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See **https://webpack.js.org/concepts#loaders
| /// <reference path="./types.d.ts" />
| 
> declare module 'dayjs/locale/*' {
|   namespace locale {
|     interface Locale extends ILocale {}

Module parse failed: Unexpected token (1:8)**
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> declare interface ILocale {
|   name: string
|   weekdays?: string[]
    at handle (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\@packages\server\node_modules\@cypress\webpack-preprocessor\dist\index.js:212:23)
    at finalCallback (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:441:32)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:505:17
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at Cache.storeBuildDependencies (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Cache.js:122:37)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:498:23
    at Compiler.emitRecords (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:919:5)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:490:11
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:882:27
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\neo-async\async.js:2818:7
    at done (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\neo-async\async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\tapable\lib\Hook.js:18:14)
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\webpack\lib\Compiler.js:736:33
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:143:16
    at C:\Users\Vinit.kumar\AppData\Local\Cypress\Cache\13.13.0\Cypress\resources\app\node_modules\@packages\server\node_modules\graceful-fs\graceful-fs.js:61:14
    at FSReqCallback.oncomplete (node:fs:191:23)

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.
  (Results)
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        0                                                                                │       
  │ Passing:      0                                                                                │       
  │ Failing:      1                                                                                │       
  │ Pending:      0                                                                                │       
  │ Skipped:      0                                                                                │       
  │ Screenshots:  0                                                                                │       
  │ Video:        true                                                                             │       
  │ Duration:     0 seconds                                                                        │       
  │ Spec Ran:     app.cy.ts                                                                        │       
  └────────────────────────────────────────────────────────────────────────────────────────────────┘       
  (Video)
  -  Video output: C:\Users\Vinit.kumar\source\Repos1\project\dist\apps\e2e-test\life-agent\videos\app.cy.ts.mp4
Portal_Version: 24.4.0-next.3
Created ---------> ..\..\..\dist\apps\e2e-test\life-agent\allure-results\environment.properties
Total_Test: 0
Passed_Test: 0
Failed_Test: 1
Skipped_Test: 0
====================================================================================================
  (Run Finished)
       Spec                                              Tests  Passing  Failing  Pending  Skipped         
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐       
  │ ×  app.cy.ts                                  0ms        -        -        1        -        - │       
  └────────────────────────────────────────────────────────────────────────────────────────────────┘       
    ×  1 of 1 failed (100%)                       0ms        -        -        1        -        -         

 —————————————————————————————————————————————————————————————————————————————————————————————————————————

 >  NX   Ran target life-agent for project e2e-test (14s)

    ×    1/1 failed
    √    0/1 succeeded [0 read from cache]

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

cypress.base.config.ts

import { defineConfig } from 'cypress';
import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
import allureWriter from '@shelex/cypress-allure-plugin/writer';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import grepPlugin from '@cypress/grep/src/plugin';
import { allureReportUtils } from '@project/report';
import { updateCredentials } from '@project/e2e-common';
const colors = {
  green: '\x1b[32m',
  reset: '\x1b[0m',
};
export const globalSetupNodeEvents = (
  on: Cypress.PluginEvents,
  config: Cypress.PluginConfigOptions
): Cypress.PluginConfigOptions => {
  grepPlugin(config);
  allureWriter(on, config);
  on('task', {
    log(message) {
      console.log(`${colors.green}${message}${colors.reset}`);

      return null;
    },
    table(message) {
      console.table(message);

      return null;
    },
  });
  on('before:run', () => {
    const run: string = config.env.RUN_ENV || 'test';
    updateCredentials(run, 'userdata');
  });
  on('after:run', async (results) => {
    await allureReportUtils.setEnv(results);
  });
  return config;
};

const baseConfig = defineConfig({
  e2e: {
    ...nxE2EPreset(__dirname),
    setupNodeEvents: globalSetupNodeEvents,
    defaultCommandTimeout: 10000,
    viewportWidth: 1440,
    viewportHeight: 900,
  },
  env: {
    allure: true,
    grepOmitFiltered: true,
    grepFilterSpecs: true,
  },
});

export default baseConfig;

cypress.config.ts

import { defineConfig } from 'cypress';
import baseConfig from '../cypress.base.config';
import { setupNodeEvents } from './src/config/node-events';

export default defineConfig({
  ...baseConfig,
  e2e: {
    ...baseConfig.e2e,
    setupNodeEvents,
    videosFolder: '../../../dist/apps/e2e-test/life-agent/videos',
    screenshotsFolder: '../../../dist/apps/e2e-test/life-agent/screenshots',
  },
  env: {
    ...baseConfig.env,
    allureResultsPath: '../../../dist/apps/e2e-test/life-agent/allure-results',
    apiImplementation: 'default',
    portal: 'customer',
  },
});

e2e.base.ts

import '@shelex/cypress-allure-plugin';
import '@testing-library/cypress/add-commands';
import 'cypress-axe';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import registerCypressGrep from '@cypress/grep';
registerCypressGrep();
Cypress.on('uncaught:exception', () => false);

e2e.ts

import './commands';
import '../../../e2e.base';

we are using nx share lib for cypress custom command import '@project/cypress-command'; which we are importing in every project

import {
  loginUtils,
  utils,
  CardRowModel,
  TableRowModel,
  formatUtils,
} from '@project/e2e-common';
import { HttpService } from '@project/http';
// ***********************************************
declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
  namespace Cypress {
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    interface Chainable<Subject> {
      loginWithSession(
        url: string,
        credential: {
          useremail: string;
          pwd: string;
        }
      ): void;
      login(
        url: string,
        credential: {
          useremail: string;
          pwd: string;
        }
      ): Chainable<JQuery<HTMLElement>>;

      setAccesToken(httpService: HttpService): Chainable<Cypress.Response<any>>;

      getPathValue(
        path: string,
        jsonResponse?: Record<string, unknown> | [Record<string, unknown>],
        type?: string
      ): Chainable<string>;

      formatPhoneNumber(phoneNumber: string): Chainable<string>;
      verifyDashboardCardsRowModel(
        translation: Record<string, Record<string, string>>,
        header: CardRowModel[]
      ): void;
      verifyTableRow(
        row: JQuery<HTMLElement>,
        rowIndex: number,
        configuration: {
          columns: TableRowModel[];
        }
      ): void;
      verifyTableHeader(
        translation: Record<string, Record<string, string>>,
        configuration: {
          columns: TableRowModel[];
        }
      ): void;
      verifyCardRowModel(
        translation: Record<string, Record<string, string>>,
        header: CardRowModel[]
      ): void;
      checkPageA11y(path: any, context?: any, options?: any): void;
    }
  }
}

and we have one share utlits file where i can see error code which is working fine with cypress 12.12

const formatDate = (
  date: string | number | null,
  localeCon = utils.localeConfig()
): string => {
  if (!date) {
    return '-';
  }

  const dateValue =
    typeof date === 'number'
      ? new Date(date)
      : isNaN(Date.parse(date as string))
      ? null
      : dayjs(date);

  if (!dateValue) {
    return '-';
  }

  const locale = localeCon.locale.toLowerCase().includes('en-us')
    ? localeCon.locale.toLowerCase().split('-')[0]
    : localeCon.locale.toLowerCase();

  try {
    import(`dayjs/locale/${locale}`)
      .then((localeModule) => {
        dayjs.locale(localeModule.default);
      })
      .catch((error) => {
        console.error('Error loading dayjs locale:', error);
      });

    return dayjs(dateValue).format(localeCon.formats.shortDate);
  } catch (error) {
    console.error('Error formatting date:', error);
    return '-';
  }
};

Desired behavior

Should upgrade successfully.

Test code to reproduce

Error: Webpack Compilation Error
Module parse failed: Unexpected token (3:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See **https://webpack.js.org/concepts#loaders
| /// <reference path="./types.d.ts" />
| 
> declare module 'dayjs/locale/*' {
|   namespace locale {
|     interface Locale extends ILocale {}

Module parse failed: Unexpected token (1:8)**

Cypress Version

13.13.0

Node version

v20.11.1

Operating System

window

Debug Logs

No response

Other