Breakpoints become disabled after start up

[dfdumaresq]

Describe the bug
Breakpoints on .tsx or .cs files are shown as enabled before running project. After starting the project, the breakpoints on .tsx files are greyed out and display 'No symbols have been loaded for this document', the breakpoints on the C# files remain enabled.
It is possible to start the debugger in a .tsx file by adding "debugger;" to the source code.

To Reproduce
Steps to reproduce the behavior:

1. Set breakpoints on Welcome.tsx and .VouchersController.cs files and notice both are red
2. Start Project
3. Notice breakpoint on Welcome.tsx file is now grey

VSCode Developer Tools

1. After starting project, notice error in console:
   DevTools failed to load source map: Could not load content for https://ticino.blob.core.windows.net/sourcemaps/379476f0e13988d90fab105c5c19e7abc8b1dea8/core/vs/workbench/workbench.desktop.main.js.map: Load canceled due to load timeout

Log File
vscode-debugadapter-ebc69a8f.json.gz

VS Code Version:
Version: 1.59.0 (Universal)
Commit: 379476f0e13988d90fab105c5c19e7abc8b1dea8
Date: 2021-08-04T23:14:40.191Z
Electron: 13.1.7
Chrome: 91.0.4472.124
Node.js: 14.16.0
V8: 9.1.269.36-electron.0
OS: Darwin x64 20.6.0

Node Version

• node: v14.17.3

Additional context

• Problem started after the deprecation notice was added to the Chrome Javascript Debugger extension. (About 2 weeks ago). So I have switched over to the built-in JS debugger (tried Nightly but made no difference).
• It is possible to start the js-debugger in Welcome.tsx by adding debugger; to a line. This opens a read-only file and allows debugging, but not a solution. I am trying to figure out if the sourceMaps are not correctly specified.
• Also notice periodically that Developer Tools throws
  -- ERR TreeError [CallStackView] Data tree node not found: [object Object]: Error: TreeError [CallStackView] Data tree node not found

Launch config (removed sourceMapPathOverrides)

        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "https://localhost:8080",
            "webRoot": "${workspaceFolder}/ClientApp/src",
            "sourceMaps": true,
            "outFiles": [
                "${workspaceFolder}/ClientApp/build/*.js",
                "!**/node_modules/**"
            ],
            "trace": true
        },

        {
            "command": "cd ClientApp ; npm run start:dev",
            "name": "Run npm start",
            "request": "launch",
            "type": "node-terminal"
        },
        {
            "name": ".NET Core Launch (web)",
            "type": "coreclr",
            "request": "launch",
            "preLaunchTask": "build",
            "program": "${workspaceFolder}/bin/Debug/netcoreapp3.1/ManagementConsole.dll",
            "args": [],
            "cwd": "${workspaceFolder}",
            "stopAtEntry": false,
            "internalConsoleOptions": "openOnSessionStart",
            "launchBrowser": {
                "enabled": true,
                "args": "${auto-detect-url}",
                "windows": {
                    "command": "cmd.exe",
                    "args": "/C start ${auto-detect-url}"
                },
                "osx": {
                    "command": "open"
                },
                "linux": {
                    "command": "xdg-open"
                }
            },
            "env": {
                "ASPNETCORE_ENVIRONMENT": "Development"
            },
            "sourceFileMap": {
                "/Views": "${workspaceFolder}/Views"
            }
        },

[connor4312]

It looks like the sourceMapPathOverrides. If you remove that property and use the defaults, sources should map correctly. If not, please grab a fresh log.

[dfdumaresq]

I've removed the property sourceMapPathOverrides as you suggested, but same thing. Here's the fresh log:
vscode-debugadapter-a47b0baf.json.gz

[connor4312]

It looks like your webRoot should also be "webRoot": "${workspaceFolder}/ClientApp", not "webRoot": "${workspaceFolder}/ClientApp/src",

[dfdumaresq]

Thanks @connor4312 - I've fixed that webRoot path and am adding a fresh log.
I have the same results, so I'm wondering if this is something else (Electron)? The most striking effect is that the moment I start either the C# or the Node process, the breakpoint goes grey. (Unbound). Reloading the browser does not help either.
Here's the log
vscode-debugadapter-32675f82.json.gz

[dfdumaresq]

@connor4312, I've recently discovered that my breakpoints die on .tsx files only. They're working as expected on .ts, and .cs files with pwa-chrome.

[connor4312]

Oh, I see something interesting. There's a NUL byte in the generated paths: ./src/Dashboard/\u0000#containers/Welcome.tsx. I can reproduce that in an ordinary webpack config, that gets inserted if I have a # in my path. I think it should always be appropriate and safe to strip NUL bytes from the strings.

[alexr00]

@connor4312 what is the best way to verify this?

[connor4312]

Create a "hello world" webpack app and have a file containing a # in its path included in the build. Verify that you can set a breakpoint in that file.

[alexr00]

The breakpoint still shows as disabled, but it does break.