next.js debugging with vs code: unbound breakpoint - source maps expected in wrong folder?

Question

I'm trying to set up the debugger for next.js on vs code. (I'm on windows, using the WSL and chrome).

The issue is that the breakpoints I try to set will be unbound. I guess this is due the source maps not connecting in some form?

I've set up the .vscode/launch.json as described in https://nextjs.org/docs/advanced-features/debugging.

Here's the central error that shows up in the vs-code debugging console for the browser debugging session:

Could not read source map for file:///C:/shared/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/runtime.js {...}'
Could not read source map for file:///C:/shared/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/internal/helpers.js {...}'

So from this, I conclude that some part of the debugging toolchain expects my project/workspace root to be at file:///C:/shared. However the actual root is at file:///C:/shared/work/workbench.

---

My project

C:
  /shared/work/workbench
    /.vscode
      launch.json
      workbench.code-workspace
    {...rest}

Contents of launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Contents of the workspace file:

{
  "folders": [
    {
      "path": ".."
    }
  ]
}