Debugging react app with hot-reloading does not work

[reimer-atb]

Steps to reproduce:

1. create new react app: npx create-react-app my-app
2. start react app: export BROWSER=none && yarn start
3. start debugging in vscode - see launch.json below
4. set a breakpoint in App.js file
5. change some code in App.js file, e.g. add a console.log('foo')

Result: After changing anything in App.js file, and the changed code gets hot-reloaded in the dev server, no breakpoint is hit anymore. Sometimes breakpoints are still hit and code execution stops but at the wrong line in the vscode editor. This usually happens if you remove or add lines of code in a file, where you previously set a breakpoint. It seems as if the debugger still stops at the line where the breakpoint was before adding / removing lines of code.

Expected Result: all breakpoints should still be working after changing and hot-reloading code

Note: Debugging works as expected as long as I restart the dev server (yarn start) after every code change. But I think that is not the way it was intended to be done?

launch.json:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch localhost",
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

[sirlordt]

I had similar issue. The debug cannot start. Only create "Tab 1", "Tab 2", "Tab 3" .... "Tab N" in the Visual Studio Code -> Call Stack Panel. And the react web page only reload and reload and reload inside of firefox browser.

[reimer-atb]

@sirlordt I think you have a different issue. In my case, debugging works correctly as long as I do not change any code. Only when I change some code and the change is hot-reloaded in the dev server, breakpoints are not hit anymore.

I have updated title and description to make this clearer.

[hbenl]

@philipreimer This is a long-standing bug in CRA (facebook/create-react-app#6074), see also here. I'll try to create a workaround for this.

[hbenl]

Try adding "enableCRAWorkaround": true to your settings and tell me if it works for you.

[reimer-atb]

@hbenl "enableCRAWorkaround": true seems to help mostly.

What I noticed: I sometimes had to manually reload the page in the browser (F5) after hot-reload before breakpoints were hit. When the page was reloaded automatically (triggered by hot-reload in the dev-server) breakpoints were not hit.

Another issue is that I can't seem to set any breakpoints inside arrow functions like the following (code sample from a react app in typescript):

1  const authors = props.comments.map(comment =>
2    comment.author
3  );

If I set a breakpoint in line "2" above it is ignored.

Breakpoint only works if I change the code to the following:

  const authors = props.comments.map(comment => {
    return comment.author;
  });

But that might be another issue because it happens also when restarting the dev-server, not only after hot-reloading.