`pnpm` Workspaces: VSCode debugging broken since Vite `4.1.5` incl `5.x` (issue with symlinks & sourcemaps)

[D1no]

Describe the bug

I believe from 4.2.1 on, vite or the bundler underneath, is not following symlinks correctly.

The VSCode debugging doesn't work anymore, after upgrading from Vite 4.1.3 to 4.2.1 and beyond. This is not related to the recent VSCode issues which has been fixed since version 1.77.2 (https://github.com/microsoft/vscode-js-debug/issues/1628#issuecomment-1496297164) !

Maybe related to:

• https://github.com/vitejs/vite/issues/12463
• https://github.com/vitejs/vite/issues/12265#issuecomment-1481598883

Reproduction

https://github.com/hundertschaft/flywheel

Steps to reproduce

(I am working on a representative mono-repo set-up. This is as minimal of a set-up as it can get to discover integration issues like these. Apologies if it looks confusing to you at first. Please just follow the steps below.)

Clone Repo at correct sha

git clone https://github.com/hundertschaft/flywheel.git && cd flywheel && git reset --hard 8388f5002bd3e2a630d67c105a082a84c3c8e74b

Cd into platform (the pnpm workspace)

cd platform && pnpm install

As shown in the gif above

• Open in VSCode
• Set a breakpoint in platform/ui/shell/index.tsx at line 7, const Shell ...
• In VSCode, select debug -> Browser (Chrome)

Observation 4.2.1:

• Warning by VSCode that the breakpoint isn't bound

Revert to Vite 4.1.4

• Stop VSCode debugger
• Inside of platform/apps/browser/package.json change line 11 to "vite": "4.1.4"
• Run pnpm install again
• Execute vscode debugger again

Observation 4.1.4:

• Breakpoint works fine

---

The responsible launch.json is at platform/.vscode/launch.json and looks like this:

{
  // ...
  "version": "0.2.0",
  "configurations": [
    {
      /**
      * Vite
      */
      "name": "Browser (Chrome)",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "pnpm",
      "runtimeArgs": [
        "start:browser",
      ],
      "serverReadyAction": {
        "action": "debugWithChrome",
        "webRoot": "${workspaceFolder}/apps/browser/src",
        "pattern": "localhost:([0-9]+)",
        "uriFormat": "http://localhost:%s",
      },
      "internalConsoleOptions": "openOnFirstSessionStart",
    }
  // ...

Vite is started as usual with vite --host --port 3000, just behind a pnpm workspace command that makes sure the port is free (pnpm -w start:browser) and makes no difference.

Background & Guesses

pnpm (like yarn) workspaces work by symlinking other monorepo pacakges into the local node_modules folder while in reality residing in the root node_modules folder of the pnpm workspace. In the reproduction above: ./platform is the pnpm workspace.

The vite application itself however, lives in /apps/browser/ and consumes all its dependencies via its local /apps/browser/node_modules folder as symlinks. These symlinks point to packages and application code like ui outside of its application folder. This approach allows for vertical slice architectures (i.e. having a folder per feature that has each the server, client and test code).

I would love vite to be monorepo friendly, which likely means to ensure with test cases that symlinks always work fine.

System Info

PNPM VERSION: 7.30.0


  System:
    OS: macOS 13.2.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 28.28 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.14.1 - ~/.nvs/default/bin/node
    npm: 9.3.1 - ~/.nvs/default/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Chrome Canary: 114.0.5695.0
    Firefox: 97.0.1
    Safari: 16.3
  npmPackages:
    @vitejs/plugin-react-swc: ^3.2.0 => 3.2.0 
    vite: ^4.2.1 => 4.2.1

Used Package Manager

pnpm

Logs

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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 vuejs/core instead.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[cqone]

Having the same issue, is there a workaround? Even with version 5.1, the problem unfortunately still exists

[xanatos]

Test2.zip

I've created a minimal project. Can confirm, same problem up to the latest version. There is an additional version that is problem-free: 4.1.5

[D1no]

Two years later, any updates on this @sapphi-red ?

Sourcemap / debugging in VSCode in pnpm workspaces (symlinks) appears to still be broken.

Back the, we threw out Vite in the end but I'd like to consider it for an upcoming greenfield project.