Breakpoints in vscode debugger often fail for a React application

Question

My React application is written in Typescript and I debug it using Chrome. After a fresh start of the application everything works fine. I can set breakpoints and the debugger stops at them.

The problems appear when I change source code. Existing breakpoints are moved to a wrong line and when I try to set new breakpoints they cannot be resolved. I have to close Chrome and re-open it to make things work again. My launch config is:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Shell GUI",
            "url": "https://localhost:3001",
            "webRoot": "${workspaceFolder}/src",
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///build/*": "${webRoot}/*"
            }
        }
    ]
}

I tried to fix the issue by specifying source map overrides, but that has not improved the situation at all. And if I haven't created a production build yet then there's no build folder at all. To me it looks as if Chrome doesn't get code changes (assuming here that breakpoints are evaluated by Chrome).

What do I have to change to make debugging working correctly, even after source code changes?

Answer 1

Unfortunately this is a known issue with create-react-app at the moment:

There's a link to track the issue here: https://github.com/facebook/create-react-app/issues/6074