VS Code/Chrome DevTools调试NPM Workspaces monorepo的TS+React断点问题

1. 公共包（shared-package）配置调整 #

首先确保公共包输出了正确的源码映射：

• 打开packages/shared-package/tsconfig.json，确认以下配置项为true：

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": true
  }
}

• 如果你用了tsup、rollup等工具打包公共包，要在打包配置中开启sourcemap输出，比如tsup配置：

// tsup.config.ts
export default defineConfig({
  sourcemap: true
})

2. React应用（my-react-app）配置调整 #

2.1 TS路径映射配置 #

打开apps/my-react-app/tsconfig.json，添加路径映射直接指向公共包源码，避免走node_modules下的预编译产物：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      // 替换为你的公共包实际发布名称
      "@your-scope/shared-package": ["../../packages/shared-package/src/index.ts"]
    }
  }
}

2.2 构建工具配置 #

• 如果使用Vite构建，在vite.config.ts中添加以下配置：

export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      sourcemap: true
    }
  },
  build: {
    sourcemap: true
  }
})

• 如果使用CRA构建，可通过craco、react-app-rewired等工具修改webpack配置，开启sourcemap并允许处理workspace依赖的源码映射：

// craco.config.js
module.exports = {
  webpack: {
    configure: (config) => {
      config.devtool = 'source-map'
      // 取消对workspace包的编译排除
      config.module.rules[1].oneOf.forEach(rule => {
        if (rule.test?.toString().includes('tsx')) {
          rule.exclude = /node_modules\/(?!@your-scope\/shared-package)/
        }
      })
      return config
    }
  }
}

3. VS Code调试配置修正 #

修改你的launch.json，修正webRoot路径并添加sourcemap路径映射规则：

{
  "name": "Launch Edge",
  "request": "launch",
  "type": "pwa-msedge",
  "url": "http://localhost:3000",
  // webRoot指向React应用根目录，而非整个monorepo根目录
  "webRoot": "${workspaceFolder}/apps/my-react-app",
  "sourceMapPathOverrides": {
    // 适配webpack/CRACO的sourcemap路径
    "webpack://../packages/*": "${workspaceFolder}/packages/*",
    "webpack://_N_E/../packages/*": "${workspaceFolder}/packages/*",
    // 适配Vite的sourcemap路径
    "/@fs/*": "${workspaceFolder}/*",
    "*": "${webRoot}/*"
  }
}

4. 生效验证 #

配置完成后执行以下操作：

1. 清除浏览器缓存、停止现有dev服务
2. 重新启动React应用的dev服务
3. 任意修改一行shared-package的代码触发热重载
4. 此时无论是Chrome DevTools还是VS Code调试器，都可以正常命中公共包内的断点

内容的提问来源于stack exchange，提问作者Johnny Oshika