[Bug] VSCode - Could not read source map for file in dependent module

[BryanHunt]

Describe the bug

I have a dependent module written in typescript that includes the source and source maps. When I start a debug session in VSCode, I get errors that say

Could not read source map for file ... ENOTDIR: not a directory, open /path/yarn2/.yarn/cache/@scope-module-4.0.3-4b1897c86a-13ee0b7a8a.zip/node_modules/@scope/module/dist/file.js.map

When I step into the code in the module, I get the .js instead of the .ts file.

To Reproduce

Debug a module written in typescript with source maps.

Environment if relevant (please complete the following information):

• OS: OSX
• Node version: 14.15.1
• Yarn version: 2.4.0

[yarnbot]

Hi! 👋

This issue looks stale, and doesn't feature the reproducible label - which implies that you didn't provide a working reproduction using Sherlock. As a result, it'll be closed in a few days unless a maintainer explicitly vouches for it or you edit your first post to include a formal reproduction (you can use the playground for that).

Note that we require Sherlock reproductions for long-lived issues (rather than standalone git repositories or similar) because we're a small team. Sherlock gives us the ability to check which bugs are still affecting the master branch at any given point, and decreases the amount of code we need to run on our own machines (thus leading to faster bug resolutions). It helps us help you! 😃

If you absolutely cannot reproduce a bug on Sherlock (for example because it's a Windows-only issue), a maintainer will have to manually add the upholded label. Thanks for helping us triaging our repository! 🌟

[mariusmarais]

I'm having the same problem.

I run a normal node debug session with a PNP bootstrap and a webpack build task.

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Server",
      "args": ["./index.js"],
      "runtimeArgs": ["--require", "../../.pnp.js"],
      "cwd": "${workspaceFolder}/server/dist",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack://*": "${workspaceRoot}/*"
      },
      "skipFiles": ["<node_internals>/**"],
      "preLaunchTask": "${defaultBuildTask}"
    }
  ]
}

With the sourceMapPathOverrides addition VSCode maps all my first-party Typescript when debugging.

But any required module (living in a PNP .zip file) fails:

Could not read source map for 
file:///paaaath/.yarn/cache/@js-joda-core-npm-3.2.0-d2526290e9-c4b106b0fe.zip/node_modules/@js-joda/core/dist/js-joda.js:
 ENOTDIR: not a directory, open '/paaaath/.yarn/cache/@js-joda-core-npm-3.2.0-d2526290e9-c4b106b0fe.zip/node_modules/@js-joda/core/dist/js-joda.js.map'

During editing I can click into third-party modules since the arcanis.vscode-zipfs extension is loaded.

I've been trying to setup a sourceMapPathOverrides for that too, but I'm unsuccessful.

(FWIW, the sourcemap that webpack builds contains filenames like "webpack://server/external \"@js-joda/timezone\"", which don't seem to line up with the error, so either VSCode is already getting that part right, or it just doesn't matter?)