Can't run Typescript tests in Cypress when I have @cypress/webpack-batteries-included-preprocessor enabled

Current behavior

Because of this issue we have to use @cypress/webpack-batteries-included-preprocessor enabled in our setup. This looks like this: // cypress/plugins/

import webpackPreprocessor from '@cypress/webpack-batteries-included-preprocessor'
module.exports = (on: (arg0: string, arg1: any) => void, config: { env: { ENVIRONMENT: any } }) => {
    // We need to enable webpack preprocessing because Webpack doesn't play nice with
    // Swagger generated clients: https://github.com/cypress-io/cypress/issues/8373
    const options = webpackPreprocessor.defaultOptions

    options.webpackOptions.module.rules.push({
        parser: { amd: false },
    })

    on('file:preprocessor', webpackPreprocessor(options))
    // other unrelated stuff

}

We have 2 tsconfig.json files in the project. If we don’t set tsconfig.json in the root folder, then we get :

TypeError: Cannot read property 'defaultOptions' of undefined
    at module.exports (/Users/andrew/Work/New10/Testing/cypress/cypress/plugins/index.ts:43:41)

Root tsconfig.json looks like this :

{
  "extends": "@new10com/new10-standard/tsconfig.base.json",
  "include": [
    "cypress/**/*.ts",
    "cypress/**/.*.ts",
    "index.d.ts"
  ],
  "exclude": [".vscode", "deploy", "node_modules/**"],
  "compilerOptions": {
    "baseUrl": ".",
    "allowJs": true,
    "esModuleInterop": true,
    "types": ["cypress"],
    "typeRoots": ["./typings", "./node_modules/@types"],
    "rootDir": ".",
    "skipLibCheck": true,
    "noEmit": false,
    "lib": ["esnext.asynciterable", "esnext", "dom", "es5"]
  }
}

Cypress tsconfig.json looks like this:

// cypress/tsconfig.json

{
  "extends": "../tsconfig.json",
  "include": ["./**/*.ts", "./**/*.*.ts", "@cypress/webpack-batteries-included-preprocessor"],
  "exclude": [],
  "compilerOptions": {
    "rootDir": "../",
    "types": ["cypress"],
    "lib": ["es2015", "dom"],
    "isolatedModules": false,
    "allowJs": true,
    "noEmit": true
  }
}

If we have webpack preprocessor enabled, then at the run of typescript spec we get this error:

Error: You are attempting to run a TypeScript file, but do not have TypeScript installed. Ensure you have 'typescript' installed to enable TypeScript support.

The file: /Users/andrew/Work/New10/Testing/cypress/cypress/integration/regular/smokeTests/signup-user.spec.ts
    at Object.handler (/Users/andrew/Work/New10/Testing/cypress/node_modules/@cypress/webpack-batteries-included-preprocessor/index.js:110:29)
    at invoke (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:22:16)
    at /Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:41:14
    at tryCatcher (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:40:23)
    at Object.wrap (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/preprocessor.js:28:8)
    at execute (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:119:27)
    at EventEmitter.<anonymous> (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/child/run_plugins.js:202:5)
    at EventEmitter.emit (events.js:315:20)
    at process.<anonymous> (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at process.emit (events.js:315:20)
    at process.emit (/Users/andrew/Library/Caches/Cypress/6.8.0/Cypress.app/Contents/Resources/app/packages/server/node_modules/source-map-support/source-map-support.js:495:21)
    at emit (internal/child_process.js:876:12)
    at processTicksAndRejections (internal/process/task_queues.js:85:21)

But js specs that use our generated API client work just fine.

If will disable preprocessing, then typescript spec runs just fine, but specs with generated API client will fail just like described in issue

Desired behavior

We would love convert our specs into typescript and use our generated client along with it.

Test code to reproduce

I will try to create some small demo project, but meanwhile wanted to ask if you know where at least to look for a problem ? I couldn’t find anywhere in the google this kind of error.

Versions

Cypress 6.8.0 Mac OS Chrome 89

[chrisbreiding]

Trying this out on the repro, I found there’s a bug in the batteries-included preprocessor that prevents TypeScript support from working when passing in the default options, so what I posted in the above comment won’t work. I’ll work on a fix and publish a new version of @cypress/webpack-batteries-included-preprocessor.

[azakordonets]

That actually worked, thanks you 🙇‍♂️