Stacktrace for errors in Cypress command log does not match the file when using Typescript

[amenk]

Current behavior

1. Execute cypress run,
2. Test fails
3. click the line in the backtrace (in PHPStorm)
4. code does ot match

Line numbers of stack trace don't match the code in cypress 12.8

Basically the same like in

#7715

Desired behavior

The line numbers match the code

Test code to reproduce

Cypress Version

12.8.0

Node version

16.17.0

Operating System

Ubuntu 22.04

Debug Logs

No response

Other

No response

[warrensplayer]

@amenk Thanks for the reporting the issue. Can you please try on the latest version of Cypress to see if you can still reproduce this? Also, can you please provide a reproducible example of the issue you're encountering. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[amenk]

@warrensplayer Thanks, we tried 12.11.0 as well - same issue - on different machines. Will try to cook up a smaller example.

[marktnoonan]

Thanks @amenk, https://github.com/cypress-io/cypress-test-tiny might be useful to make the repro. It seems like there could be many variables at play. A quick test for me showed normal behavior when clicking through from a failing test - got to the correct line and character in the file in VS Code.

[amenk]

okay, thanks.
By the way: In our case even the built-in code view on the left sometimes did not match the error.

Will try to provide better info soon.

[amenk]

I observe something else: Our code does not have ";" at the end, the cypress code has - so there is some transpilling happening there, I guess?
Is this maybe messing up the line numbers?

[marktnoonan]

Yeah this is interesting, happy to take a closer look if we can reproduce - otherwise it will be very difficult to track down and verify that we have fixed something.

[jchatard]

Hello,

I'm facing the same bug, but I'm using Typescript. I made a repro based on the tiny cypress project.

https://github.com/Breek/cypress-test-tiny

2 commits:

• add Typescript
• create failing test to show the bug

It goes to line 25, but shoud go to 32 for the failing test.

Happy to help,
Cheers
Jérémy

[jchatard]

Screenshot to help.

[amenk]

Cool, we use a mix of TS and JS files by the way.

[marktnoonan]

Thanks for the repro @jchatard and the screenshot :), I confirmed with the repro provided that simply changing the extension in the Cypress test from .cy.ts to .cy.js "fixes" this.

Looks like a longstanding bug, I confirmed it all the way back in 9.7.0. Routing to the team to check it out further.

[marktnoonan]

Actually worth noting that typescript was not a part of your screenshots @amenk, I see a js file there. Can you confirm does js vs ts for the test make any difference to you?

[amenk]

@marktnoonan Good point.
I have a single .ts file (besides cypress.config.ts) in the project (support/index.d.ts) which was not part of the stacktrace. Still, renaming this file to index.d.js does not fix the line numbers.

[BillyTom]

I also have a problem with the stack trace. The printed line numbers do not match the line numbers in the source files:

Test error:

commands.ts code snippet:

Note that the stack trace shows the compiled javascript, for example var productPriceFormatted = productPrice + '.00' instead of const productPriceFormatted: string = productPrice + '.00';

Our project uses pure TypeScript for Cypress, e.g.:

• cypress.config.ts
• support/commands.ts
• support/e2e.ts
• tests/10_login.cy.ts

And so on. I tried many different settings in tsconfig.json to get the source maps working correctly, but to no avail.

I use:
Cypress 13.3.2
Node 16.20.0
Ubuntu 23.04

[aholland]

Are there any plans to fix this, please?

[spatiumstas]

Same problem

[SketchParker]

I'm able to reproduce this with strictly .js files. At one point two weeks ago we played around with typescript for a plugin, but found a js friendly implementation later. Even after resetting everything to js and uninstalling typescript, the problem persists. Sometimes in larger spec files it's hundreds of lines off, making debugging more tedious than it should be.

[Marcel-a]

I had the same problem for years and found a fix today that works for me:

Add "sourceMap": true under compilerOptions in your tsconfig.json.

Explanation:

When I open the browser’s developer tools, I can see my spec and support files under webpack, like webpack:///cypress/src/tests/test.cy.ts. Here, the script is missing empty lines and unused imports. The line number in the Cypress error messages matches the line number in this "minified" version of the script. So, I thought webpack might be the problem here.

It seems like Cypress uses @cypress/webpack-batteries-included-preprocessor. In this code, I found a line where some compiler options are set if sourceMap is not set: https://github.com/cypress-io/cypress/blob/develop/npm/webpack-batteries-included-preprocessor/index.js#L40