Cypress: Typescript support: support / load user defined tsconfig.json for transpiling files

[CSchulz]

Current behavior:

index.spec.ts

import { forward } from '@apps/commons-e2e';

Fails with

Error: Cannot find module '@apps/commons-e2e' from 'e2e\src\integration'

Desired behavior:

ts-node should load an user defined tsconfig.json to find own path mappings.

Test code to reproduce

1. create a tsconfig.json with a path mapping to a lib
2. create a spec file using this path mapping
3. run cypress

Versions

4.4.0

┆Issue is synchronized with this Jira Features by Unito

[maxime1992]

I just tried to upgrade to 4.4.0 and ended up with the same error.

Everything was working just fine with that version but if I try to take advantage of the new feature:

TypeScript test files are now supported without using special preprocessors plugins. Addresses #1859.

To have it working previously I had to do the following:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  resolve: {
    extensions: ['.ts', '.js'],
    plugins: [
      new TsconfigPathsPlugin({
        configFile: './tsconfig.json',
      }),
    ],
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: [/node_modules/],
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: 'tsconfig.e2e.json',
            },
          },
        ],
      },
    ],
  },
};

[kpittman-securus]

I am having trouble with 4.4.0 and TypeScript files also. When I run a build with my own tsconfig.json and then use the generated *.spec.js files for my specs, Cypress works fine.

When I run Cypress against all of my *.spec.ts files, 90% of them work fine, but 10% give cryptic error messages about Unexpected Tokens.

I say "cryptic" messages because A. the TS files compile just fine on their own, and B. the error message points to a line:column number that makes no sense (issue with not having sourcemaps maybe?)

Oops...we found an error preparing this test file:

  C:\path\to\my.spec.ts

The error was:

Error: Parsing file C:\path\to\my.helper.ts: Unexpected token (55:12)  


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.

When I look at my.helper.ts line 55 is something like this:

export function myFunction(s: string) {
//         ^ this is char 12 where Cypress says there is an error
//           clearly something is not correct about line:col in error message

At best, this would work flawlessly (maybe needs to parse my tsconfig.json?)
At minimum, it would be nice if the error log displayed the correct line number.
If we can't show the right line number for some reason, it would be nice if the log contained the actual line of source it is choking on.

[bahmutov]

Reproducible test case in https://github.com/cypress-io/cypress-test-tiny/tree/test-path-ts

[kpittman-securus]

@jennifer-shehane any update on the status for this one?

[RocketPuppy]

I'm on Cypress 4.7.0 and running into something that looks remarkably similar to this. I'm seeing cryptic syntax errors on line:columns that make no sense (in my case, they are empty lines).

[csalazar1]

Hoping this gets picked up soon. We are trying to move to typescript and eliminate relative path hell

[csnate]

I'm hitting the same error on my build server (running cypress/included:4.8.0 docker image) with a better error message:

The error was:

/var/build/integration/forgot-password/forgot-password.spec.ts:35
function attemptPasswordReset(email: string) {
                                   ^
ParseError: Unexpected token

This occurred while Cypress was compiling and bundling your test code.

This is only occurring in *.spec.ts files that have a custom function defined with typed parameters. I am also including my own tsconfig.json that sits at the same root directory as cypress.json and package.json.

tsconfig.json:

{
  "compilerOptions": {
    "strict": true,
    "baseUrl": "../node_modules",
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": [
    "**/*.ts"
  ]
}

No errors occur when running locally with cypress open (running [email protected])

[eric-burel]

Good, I am not alone. I can reproduce this issue only in my Docker image, using cypress/base:11, while tests work fine locally without even specifying the configFile of ts-loader.
Edit: with Cypress 4.8.0
Edit 2: aaaand I can repro only in my private application, though systematically. Maybe an update to 4.9 could solve it, will try again later.
And error message:

Error: Webpack Compilation Error
/app/cypress/tsconfig.json
[tsl] ERROR
      TS18003: No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["../node_modules/cypress","*/*.ts"]' and 'exclude' paths were '["../node_modules","../**/*.stories.tsx","../**/stories.tsx","../cypress"]'

The issue is the incorrect tsconfig.json being loaded, that's quite weird

[cypress-bot[bot]]

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

[cypress-bot[bot]]

Released in 5.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v5.0.0, please open a new issue.