Instructions to replicate the issue:
Place a breakpoint in any .tsx file
execute my npm script
"start": "react-scripts start",commence debugging with
F5or by choosing a configuration from the Run and Debug window in vscode.
Both configurations provided below lead to an 'unverified breakpoint' in vscode.
https://i.sstatic.net/wARWq.png
launch.json
{
// Utilize IntelliSense to understand potential attributes.
// Hover over to see explanations of current attributes.
// For more details, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Firefox",
"request": "launch",
"type": "firefox",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"enableCRAWorkaround": true
},
{
"name": "Launch Firefox",
"request": "launch",
"type": "firefox",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"enableCRAWorkaround": false
}
]
}
https://i.sstatic.net/yXlwQ.png
I am capable of debugging typical JavaScript and TypeScript projects in vscode without any challenges. I presume that I need to modify what 'react-scripts start' is performing, or address where it's intended to generate .jsx files and sourcemaps in my launch.json. This is the resource I adhere to for debugging TypeScript in vscode. More specifically, this segment explains my interpretation of the situation.
If there is no source map available for the original source, or if the source map is defective and cannot effectively link between the source and the generated JavaScript, then breakpoints will display as unverified (gray hollow circles).
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false, // I've experimented with both false and true (default value)
"jsx": "react-jsx",
"sourceMap": true // I've tried this with both true and false (default value)
},
"include": [
"src"
]
}