After successfully configuring TypeScript in my project, I encountered an issue with breakpoints not stopping at the correct line and variable values not being available until stepping into more code. This appears to be a source map mismatch problem.
I attempted to address this by adding the SourceMapDevToolPlugin to the webpack configuration file as instructed here, but unfortunately, it did not resolve the issue.
Below are some screenshots illustrating the issue:
https://i.sstatic.net/uBSoh.png
The value of 'myString' is undefined even though the line has supposedly been executed.
https://i.sstatic.net/0pq5i.png
It directly jumps to the function (bypassing the line where the function is called) and then the value of the string becomes available, which is quite perplexing.
Included below are my webpack config, launch.json, and tsconfig files for reference:
webpack config:
//Webpack config content goes here...launch.json:
//Launch.json content goes here...tsconfig:
//Tsconfig content goes here...Despite having 'inline-source-map' mode configured, bypassing the pre-launch task that compiles TypeScript files, the app still runs with breakpoints in TypeScript files displaying erratic behavior and line mismatches. Any guidance on resolving this issue would be greatly appreciated. Thank you.