TS Error : Cannot find module @angular/core for my react app

Current behavior

I’m trying to migrate to Cypress 10.7.0 from 9.70. However almost fixed all the bug but stuck here at strange message, which says @angular/core or its corresponding type declarations cannot be found.

My app is a react app so why Cypress look for Angular not even mentioned in any config.

TypeScript error: /Users/vinay/cypress_testing_service/node_modules/cypress/angular/dist/mount.d.ts(5,22): Error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.
    at ProjectConfigIpc.<anonymous> (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigManager.js:216:60)
    at Object.onceWrapper (node:events:646:26)
    at ProjectConfigIpc.emit (node:events:526:28)
    at ProjectConfigIpc.emit (node:domain:475:12)
    at ProjectConfigIpc.emit (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigIpc.js:64:22)
    at ChildProcess.<anonymous> (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigIpc.js:40:18)
    at ChildProcess.emit (node:events:526:28)
    at ChildProcess.emit (node:domain:475:12)
    at emit (node:internal/child_process:938:14)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

// cypress.config.ts
import { defineConfig } from "cypress";

export default defineConfig({
  viewportWidth: 1366,
  viewportHeight: 768,
  reporter: "mocha-junit-reporter",

  reporterOptions: {
    mochaFile: "cypress/reports/junit/test-results.[hash].xml",
    testsuitesTitle: false,
  },

  e2e: {
    // We've imported your old cypress plugins here.
    // You may want to clean this up later by importing these.
    // https://docs.cypress.io/guides/references/migration-guide#Plugins-File-Removed
    setupNodeEvents(on, config) {
      return require("./cypress/plugins/index.ts")(on, config);
    },
    baseUrl: "http://localhost:8082/",
    specPattern: "cypress/e2e/**/*.feature",
  },

  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
    },
  },
});

// cypress/plugins/index.ts
const cucumber = require('cypress-cucumber-preprocessor').default;
const browserify = require('@cypress/browserify-preprocessor');

module.exports = (on, config) => {
  const options = {
    ...browserify.defaultOptions,
    typescript: require.resolve('typescript'),
  };

  options.browserifyOptions.plugin.unshift([
    'tsify',
    { project: 'cypress/tsconfig.json' },
  ]);

  on('file:preprocessor', browserify());
  on('file:preprocessor', cucumber(options));
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--disable-dev-shm-usage');
    }
    return launchOptions;
  });
};

Desired behavior

Cypress should just run my test successfully without showing any error.

Test code to reproduce

There is no test code causing this error. This error is appearing even before listing test specs.

Upgraded Cypress to 10.7.0 from 9.7.0 and followed the GUI instructions to migrate. Then fixed some chai and chai-subset related bugs. Then started getting this error for E2E tests not for component tests.

Cypress Version

10.7.0

Node version

v16.14.2

Operating System

macOS 12.5.1

Debug Logs

TypeScript error: /Users/vinay/cypress_testing_service/node_modules/cypress/angular/dist/mount.d.ts(5,22): Error TS2307: Cannot find module '@angular/core' or its corresponding type declarations.
    at ProjectConfigIpc.<anonymous> (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigManager.js:216:60)
    at Object.onceWrapper (node:events:646:26)
    at ProjectConfigIpc.emit (node:events:526:28)
    at ProjectConfigIpc.emit (node:domain:475:12)
    at ProjectConfigIpc.emit (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigIpc.js:64:22)
    at ChildProcess.<anonymous> (/Users/vinay/Library/Caches/Cypress/10.7.0/Cypress.app/Contents/Resources/app/packages/data-context/src/data/ProjectConfigIpc.js:40:18)
    at ChildProcess.emit (node:events:526:28)
    at ChildProcess.emit (node:domain:475:12)
    at emit (node:internal/child_process:938:14)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

Other

No response

[ZachJW34]

@vin-ai awesome, glad it’s working now! I’m going to close this issue as it seems the error originated from using a plugin/preprocessor that was not compatible with your current version of Cypress.

[vin-ai]

To verify, you’ve upgraded to the cucumber processor that has support for Cypress 10 and are no longer seeing this issue?

Yes