VSCode Typescript 调试不会打开本地文件，而是在 NX Nest 项目上创建另一个文件

Question

我有一个 NX Nestjs 应用程序在 Docker 容器上运行。我已在

launch.json

设置此任务

 {
      "name": "Attach to my-app-api",
      "request": "attach",
      "address": "localhost",
      "port": 6661,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app",
      "restart": true,
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "sourceMaps": true
    },

我可以附加到会话并在终端上查看日志。 我遇到的问题是我在项目文件上设置的断点没有被带到调试会话中。

如果我从终端日志中单击映射文件，并在那里设置断点，它就会起作用。我意识到这就像我正在尝试调试的文件的副本：

我希望 VS Code 在调试时链接我的文件。

我的 docker compose 将工作区附加到应用程序文件夹中

my-api-local:
    container_name: my-app-api
    image: node:20.11.0
    tty: true
    working_dir: /app
    user: ${DOCKER_USER}
    volumes:
      - ../..:/app
      - ${NPM_CACHE}:/.npm
    command: npx nx run my-app-api"
    networks:
      - local-dev-net
    ports:
      - 3334:3334
      - 6661:6661 # Debug port

当我运行调试会话时，调试诊断显示在我的 MAC 根文件夹中找到的文件

✅ This breakpoint was initially set in:

/Users/distante/dev/org/my-project/libs/my-app/nestjs/search/feature/src/lib/search/search.controller.ts line 40 column 1

❓ We couldn't find a corresponding source location, but found some other files with the same name:

/Users/distante/libs/my-app/nestjs/search/feature/src/lib/search/search.controller.ts
If this is the same file, you may need to adjust your build tool to correct the paths.

如果我添加了覆盖

launch.json

      "sourceMapPathOverrides": {
        "webpack:///*": "/*"
      }

它会搜索根目录上的文件...

✅ This breakpoint was initially set in:

/Users/distante/dev/org/my-project/libs/my-app/nestjs/search/feature/src/lib/search/search.controller.ts line 40 column 1

❓ We couldn't find a corresponding source location, but found some other files with the same name:

/libs/my-app/nestjs/search/feature/src/lib/search/search.controller.ts
If this is the same file, you may need to adjust your build tool to correct the paths.

如果我将其映射到

"webpack:///*": "${workspaceFolder}/*"

，第一个问题会再次出现。

我现在迷路了...

Answer 1

这是 NX 和 Nest 库上的一个错误。 在此开放问题中

给出了解决方法

您必须更新项目 webpack 配置以将生成的映射映射到正确的位置。

const { composePlugins, withNx } = require('@nrwl/webpack')
const path = require('path')

// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
  // Update the webpack config as needed here.
  // e.g. `config.plugins.push(new MyPlugin())`
  config.output.devtoolModuleFilenameTemplate = function (info) {
    const rel = path.relative(process.cwd(), info.absoluteResourcePath)
    return `webpack:///./${rel}`
  }
  return config
})