Debugging React App in Visual Studio 2019 does not work

Question

I created a ASP.NET Core 3 React and Redux project using the template.

I am trying to debug the TS files. When I try to set a break point in Visual Studio in the source TS file none of the break points go where I want them.

If I try to step through the code the execution goes to the minified files instead. I think that the sourcemaps react-scripts are generating are not mapped properly. I did add "sourceMaps":true to the tsconfig.json file.

Has anyone successfully set it up and running?

Its really frustrating

Thanks

Answer 1

I had the same issue, even for the project straight from the Visual Studio 2019's React+Redux template.

Here I found a workaround that seems to work (although it's rather inconvenient):

Goto node_modules/react-scripts/config/webpack.config.js, look up cheap-module-source-map and change to eval-source-map. This is temporary and you'll have to do this every time you change your package configuration.

After this change my break points in the React code started to behave properly in VS2019.