4

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

Ilias.P
  • 179
  • 7
  • I have never used visual studio to build frontend, but if there are proper source maps you can set breakpoints in the browser dev tools in the uncompiled ts files. In chrome for example open up developer tools, go to sources, drill down to your ts files, and click on the line you want to set a break point. I daresay if you're doing anything non-trivial on the client you're probably going to have to get your hands dirty with the browser tools anyway. – Jared Smith Jan 30 '20 at 21:26

2 Answers2

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.

Paweł Bulwan
  • 8,467
  • 5
  • 39
  • 50
1

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..

Coruscate5
  • 2,253
  • 17
  • 28