Stencil: VS Code Debugger Breakpoints unbound

[hoermillerj]

Describe the bug When attaching the VS Code Debugger to the running StencilJS App, all breakpoints are unbound.

To Reproduce You can check-out my demo repository https://github.com/hoermillerj/nx-stencil-demo and serve the StencilJS Component Library project "demo". After which you can run the VS Code Debugger with the launch.json configuration called "StencilJS". All Breakpoints will be unbound. If you want to set this up yourself, this is what I did:

• Create new NX Workspace npx create-nx-workspace --preset=ts
• Add @nxext/stencil npm i --save-dev @nxext/stencil
• Generate a StencilJS library (my configuration was: name=demo, style=scss, e2eTestRunner=none, publishable=true, importPath=@demo/demo)
• Open the stencil config and add the sourceMap property set to true
• Create a launch.json file in VS Code (see configuration below)
• Build project "demo"
• Serve project "demo"
• Set Breakpoint in the default component for testing

This is my launch.json configuration:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "pwa-chrome",
        "request": "launch",
        "name": "StencilJS",
        "url": "http://localhost:3333/",
        "webRoot": "${workspaceFolder}/www",
        "sourceMaps": true,
        "sourceMapPathOverrides": {
            "./src/*": "${workspaceFolder}/src/*",
        },
        "trace": true
      }
    ]
}

Expected behavior The breakpoint should be hit and it should give the ability to debug the code step by step. This setup is working in a standalone StencilJS component library project.

Additional context Here is my package.json file:

{
  "name": "nx-stencil-demo",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {},
  "private": true,
  "devDependencies": {
    "@angular-devkit/schematics": "^13.2.4",
    "@nrwl/cli": "13.8.2",
    "@nrwl/jest": "13.8.2",
    "@nrwl/js": "13.8.2",
    "@nrwl/tao": "13.8.2",
    "@nrwl/workspace": "13.8.2",
    "@nxext/stencil": "^13.1.2",
    "@stencil/core": "^2.12.0",
    "@stencil/sass": "1.5.2",
    "@types/jest": "27.0.2",
    "@types/node": "16.11.7",
    "jest": "26.6.3",
    "jest-config": "26.6.3",
    "prettier": "^2.5.1",
    "ts-jest": "26.5.6",
    "typescript": "~4.5.2"
  },
  "dependencies": {
    "tslib": "^2.0.0"
  }
}