CODEWITHSUNDEEP
reactjstypescriptcreate-react-appvisual-studio-2019react-scripts
Ilias.P
Ilias.P

Reputation: 199

Debugging React App in Visual Studio 2019 does not work

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

Upvotes: 4

Views: 2728

Answers (2)

Coruscate5
Coruscate5

Reputation: 2533

As of January 2021, the React+Redux template appears to support debugging.

Historically, sourcemaps have never worked for me out-of-the-box for Visual Studio proper - there must have been some updates to VS to run Webpack in the background (I can live-update TS files now) and connect the sourcemap through the browser.

It does appear to take extra time for the breakpoints to be connected (you will get the "disconnected" message next to your breakpoints until the app fully loads).

Now to figure out what magic VS has added so I can fix things when they go wrong with the TS process..

Upvotes: 1

Tim Taurit
Tim Taurit

Reputation: 9239

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.

Upvotes: 1

Related Questions