Line numbers in TypeScript broken for Chrome/VSCode debugging

[anselanza]

Describe the bug

I have a web application that does not use any frameworks such as React, Vue, etc. but does use TypeScript instead of normal JS files. When breakpoints are placed in my source code (using VSCode) the application does indeed break at the expected moment, and both Chrome Debugger and VSCode highlight the same (correct) lines but all Call Stack and variables info clearly shows the debugger is being referred to a different line. In addition, the line numbers reported for console.log statements (in Debug Console, for example) do not match the source code.

Reproduction

This is unfortunately tricky to reproduce because the problem seems to accumulate over a number of lines of code, and I'm not sure exactly where the misalignment happens. I will try to describe what I'm seeing as carefully as possible:

Line 201 is indeed the same line I set a breakpoint, and Chrome stops at this breakpoint and highlights the correct line:

Back in VSCode, the same (correct) line is still highlighted and the breakpoint has not moved, BUT notice how the "Variables" pane is showing information relating to a function a few lines down (removeControlledPlayer):

Notice how Chrome Debugger is doing the same thing - the Call Stack is showing the correct line number as per the sourcecode (201) but entirely the wrong function (removeControlledPlayer starts only from line 204 in the source code):

In what I assume is related, the line numbers for nearby console.log statements are curiously out. For example, the string "pointerup: remove!" is attributed to line 195 in the logs:

...But this statement actually appears on line 211 in the source code:

When bundling the exact same source code using another bundler (in my case, Parcel) the debugger works as normal and line numbers do not misalign like this.

Is there something wrong in ESBuild sourcemaps for TypeScript, which is what I believe Vite uses for TypeScript transpilation?

System Info

System:
    OS: macOS 11.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7267U CPU @ 3.10GHz
    Memory: 101.52 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 7.21.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.55
    Firefox: 88.0.1
    Safari: 15.0
  npmPackages:
    vite: ^2.6.14 => 2.6.14

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[cphillips]

In case it helps anyone, for my project removing multi-line imports worked around the issue.

import {
funcA,
funcB
} from './lib'

to

import { funcA, funcB } from './lib' 

[Flamenco]

Here is a regex that I used to find multiline imports in my IDE

^import .*\{[^\}]+$

[paxperscientiam]

I can confirm that I too see this bug with v4.3.8 in FF and Safari.

I can also confirm that @cphillips's workaround works still.

[dmoebius]

Avoiding multi-line imports did not help in my case. Line numbers are totally off in stacktraces.

[github-actions]

Hello @anselanza. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.