create-react-app: Debugging in VS Code highlights wrong code line

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

Which terms did you search for in User Guide?

VS Code debugging

Environment

  System:
    OS: macOS 10.14.2
    CPU: x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 63.0.1
    Safari: 12.0.2
  npmPackages:
    react: ^16.6.3 => 16.6.3 
    react-dom: ^16.6.3 => 16.6.3 
    react-scripts: 2.1.1 => 2.1.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to Reproduce

TL;DR: Debug a CRA app in the VS Code debugger and break on a breakpoint or debugger; statement. When clicking on a stack frame in the call stack that’s inside react-dom.development.js, the highlighted line of code is wrong.

Install VS Code 1.30.0 or 1.31.0-insider and the Debugger for Chrome extension version 4.11.1.
npx create-react-app debugging-test
Copy the suggested launch.json file from CRA documentation into a newly created .vscode directory inside the project.
Add debugger; to the beginning of the render() method in App.js.
npm start
Hit <kbd>F5</kbd> in VS Code to launch Chrome and start debugging.
After the debugger pauses, select the second-topmost stack frame (finishClassComponent in react-dom.development.js). Observe the highlighted line of code.

Expected Behavior

The correct line of code inside the finishClassComponent function is highlighted, like in Chrome Dev Tools:

Actual Behavior

An incorrect line of code is highlighted.

This issue is related to source mapping.

The number of the highlighted line is the same in Chrome Dev Tools and VS Code, but the source code displayed in Chrome Dev Tools, which is derived from source maps, is different. react-dom.development.js has 20,749 lines of code in Chrome, but the actual file shown in VS Code has 19,727 lines.

The extent to which this issue duplicates #5319 is unclear to me. It’s not about testing, and doesn’t seem to relate to breakpoint location. Rather it’s about the code reconstructed from the source maps being different from the actual source and the VS Code debugger being tripped by this. The problem can also be reproduced by calling some code in react-dom and manually stepping into it.

For what it’s worth, I tried adding the "disableOptimisticBPs": true option suggested in #5319 to launch.json, but it doesn’t seem to be a valid option when "type" is "chrome".

Reproducible Demo

Repro repo

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 11
Comments: 21 (7 by maintainers)

Most upvoted comments

Hey! I figured out the cause of this problem and built a PR to fix it. Full details about the problem and the solution are in #7022, but here’s a quick TL;DR:

The cause was CRA configuring Babel with sourceMaps: false. This setting apparently causes Babel not to omit sourcemaps but instead to emit bad sourcemaps where sourcesContent (the inline code inside the sourcemap file) and the row/col mappings don’t match the original source code.
Changing it to sourceMaps: true (and adding inputSourceMaps: true too) fixes the problem so that sourcesContent and row/col mappings will match the original source.
The problem was only showing up in VSCode (and not in Chrome debugger) because Chrome only uses sourcesContent which was matching the sourcemap’s row/col mappings. VSCode (which uses the original source files if they’re pointed to by the sources array in the sourcemap) was hosed because the original source didn’t match the sourcemap. FYI @roblourens. I wonder if VSCode should compare the source file to the sourcesContent content, and if they don’t match, should show sourcesContent instead, so that even if Babel or webpack is misconfigured, the user will at least see valid code?
If you don’t want to wait until the PR is merged and the next CRA release is cut, you can just edit node_modules/react-scripts/config/webpack.config.js yourself-- it’s an easy change. Replace this code: https://github.com/facebook/create-react-app/blob/57ef103440c24e41b0d7dc82b7ad7fc1dc817eca/packages/react-scripts/config/webpack.config.js#L432-L436 with this code:

                // Babel sourcemaps are needed for debugging into node_modules
                // code.  Without the options below, debuggers like VSCode
                // show incorrect code and set breakpoints on the wrong lines.
                sourceMaps: shouldUseSourceMap,
                inputSourceMap: shouldUseSourceMap,

justingrant on May 9, 2019

same here !

bflorat on Mar 25, 2019

Hitting the same problem here…

ziriax on Mar 6, 2019

facing the same issue here

thiago-qat on Mar 12, 2019

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale[bot] on Aug 21, 2019