VS Code debugger with vitest maps to incorrect TypeScript lines and files in monorepo

[louislatreille-cb]

Describe the bug

Whenever I use vitest with my VS Code debugger, functions from my common package in my monorepo are not mapped properly in the typescript files.

If I start a debugging session from a top-level package, everything works as expected until I step into code from my common package. From there, the pointer is not pointing at the right lines.

When running the exact same code with tsx, the debugger works fine.

Reproduction

Refer to this repo to reproduce the issue. Reproduction steps for the bug are in there, as well as steps to show other scenarios that are working.

System Info

System:
    OS: Linux 5.4 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (12) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 11.03 GB / 15.62 GB
    Container: Yes
    Shell: 5.1.4 - /bin/bash
  Binaries:
    Node: 20.2.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.6.6 - /usr/local/bin/npm
    pnpm: 8.15.2 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    vitest: 1.4.0 => 1.4.0

Used Package Manager

pnpm

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

[hi-ogawa]

Thanks for the detailed reproduction.

I'm not familiar with how vscode magically sets up debugger, but one difference Vitest does differently from tsx is that common package referenced from api inside the same monorepo is transformed again by Vite. This is what we call "inline" instead of directly import-ing already transpiled common/dist/persistence.js and this is somewhat well-known behavior coming from Vite.

This probably makes Vscode to get confused or maybe there's no way to properly reach the original common/src files. To make Vitest behave like tsx, you can use server.deps.external to force directly importing monorepo dependency, for example:

export default defineConfig({
  test: {
    server: {
      deps: {
        external: [/common/]
      }
    }
  },
});

I tested your repro with this and debugger seems to be working. I'm not sure if there is a general solution to this other than users manually specifying server.deps.external.

[louislatreille-cb]

Thank you so much for your reply @hi-ogawa ! It did solve my issue!

I'm far from a vite expert, so your explanation helps a lot!