0

I have a React App, a YARP Proxy and a .NET API.

Entrypoint is https://localhost:5005 in my Proxy which redirects me to my Authentication Provider and back to my Frontend.

React App is running on http://localhost:3000, when using the following launch configuration the breakpoints get bound

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Edge against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

But then i can not log in into my Authentication Provider. When starting chrome from VSCode with https://localhost:5005, the breakpoints are unbound with the message We couldn't find a corresponding source location, and didn't find any source with the name App.tsx

My tsconfig.json looks like this:

{
  "compilerOptions": {
    "jsx": "react",
    "target": "es2016",
    "module": "commonjs",
    "baseUrl": "src",
    "sourceMap": true, 
    "outDir": "out",
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": false,
    "skipLibCheck": true 
  },
  "include": [
    "src"
  ]
}

I tried adding

"sourceMapPathOverrides": {
                "*": "${workspaceFolder}/src/*"
            }

as well as

"outFiles": [
                "${workspaceFolder}/out/",
            ],            
            "sourceMaps": true,
            "pathMapping": {
                //"url": "webpack://athenaeum",
                "path": "${workspaceFolder}/src/client"
            }

but both options changed nothing.

nAG - MKraus
  • 1

1 Answers1

0

It may be a source maps configuration issue. Since you're using YARP proxy, which redirects to the port 5005, you need to make sure that the source maps generated by your app match the source files requested by the browser. So, check source map is generated correctly by inspecting the 'out' directory and make sure source maps have been generated for all of your source files. Also make sure that your server is serving the source maps correctly.

Anandhu Remanan
  • 55
  • 7