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

[azakordonets]

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

[azakordonets]

I managed to get a simple repo with example:

1. Please pull my branch - https://github.com/azakordonets/cypress-test-tiny/tree/webpack-compiler-error-issue
2. Run yarn cypress:open
3. Run the test.

[hkarambizi]

Have you tried the solution from #7503?

[azakordonets]

@hkarambizi If you mean that I should add allowJs and improtHelpers, then yeah I just did that and I didn't help. I have pushed my changes to the demo repo. If you want to give it a try - that would be great.

[chrisbreiding]

To enable TypeScript support, you'll need to provide the path to your typescript dependency:

    const options = webpackPreprocessor.defaultOptions

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

    options.typescript = require.resolve('typescript')

    on('file:preprocessor', webpackPreprocessor(options))

I realize this isn't documented, so I'll update the README for @cypress/webpack-batteries-included-preprocessor to include that.

[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.

[github-actions]

Internal Jira issue: TR-763

[cypress-bot]

The code for this is done in cypress-io/cypress#15991, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[chrisbreiding]

@cypress/webpack-batteries-included-preprocessor@2.2.1 has been released with a fix for TypeScript support.

Upgrading to 2.2.1 along with providing the typescript path should fix this issue.

[azakordonets]

That actually worked, thanks you 🙇‍♂️