create-react-app: CRA2 recommended config hits random break points in VS Code

Is this a bug report?

Yes

Did you try recovering your dependencies?

Yes

npm --version 6.4.1 yarn --version 1.10.1

Which terms did you search for in User Guide?

“vs code” debugger breakpoints

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 10.10.0 - ~/.nvm/versions/node/v10.10.0/bin/node
    Yarn: 1.10.1 - ~/.nvm/versions/node/v10.10.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.10.0/bin/npm
  Browsers:
    Chrome: 69.0.3497.100
    Safari: 12.0
  npmPackages:
    react: ^16.5.2 => 16.5.2 
    react-dom: ^16.5.2 => 16.5.2 
    react-scripts: 2.0.4 => 2.0.4 
  npmGlobalPackages:
    create-react-app: 2.0.2

Steps to Reproduce

Install VS Code 1.27.2 or 1.26.1
npx create-react-app debug-cra2
Add recommended Debug CRA Tests snippet to .vscode/launch.json
Add the snippet below to src/App.test.js
Set breakpoint on line 13 console.log({ foo })
Hit F5 and debug

Snippet for App.test.js

it('should find the breakpoint', () => {
  const foo = 'bar'
  console.log({ foo })
  expect(foo).toBe('bar')
})

it('should find the other breakpoint', () => {
  const foo = 'bar'
  console.log({ foo })
  expect(foo).toBe('bar')
})

Expected Behavior

Execution stops on line 13

Actual Behavior

Execution stops on line 6 or 7, it’s inconsistent.

Reproducible Demo

https://github.com/ryanwmarsh/debug-cra2

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 55 (19 by maintainers)

Most upvoted comments

"env": { "CI": true },
"disableOptimisticBPs": true
Has solved the problem for me !

Thanks for the solution! For me disableOptimisticBPs: true alone did the trick.

+13

danielkatz on Mar 14, 2019

"env": { "CI": true },
"disableOptimisticBPs": true

Has solved the problem for me !

+13

johnrazeur on Feb 21, 2019

I added a flag that will make this work a little better. In the next vscode Insiders build you can set "_disableOptimisticBPs": true to prevent vscode from setting breakpoints until a sourcemap has loaded for the script. This will mean that breakpoints will only bind to the correct line, but they probably won’t bind before the test actually runs. So you can add a debugger statement to the top of the file to give it some time to load the sourcemap, or rerun the tests in the terminal.

Anyone watching this thread, I’d appreciate if you try it out in tomorrow’s Insiders build. It’s not a permanent solution but should unblock this at least.

roblourens on Nov 13, 2018

@roblourens I just tried debugging CRA2 tests with "_disableOptimisticBPs": true in user settings for the latest insiders. The breakpoint landed about 10 lines off.

It doesn’t work in Chrome either. Debugging tests is just flat out broken in CRA.

ryan-mars on Nov 23, 2018

I’m not sure I can share the code repo without permission, but I’ll check and see if it’s okay to share the logs.

I forgot one other thing I did was set reatainLines to true and sourceMaps to “inline” in the Babel config (but only for the Babel test env)

arizonatribe on Oct 10, 2018

This works great. Is this where we spam the PR with 👍 @ryanwmarsh

codenamekt on Mar 12, 2019

This issue is specifically about test debugging.

roblourens on Nov 26, 2018

@johnrazeur I just tested it and created a PR. Thank you!

ryan-mars on Feb 21, 2019

@ianschmitz - unfortunately I don’t think this will help because I’ve already tested every possible devtool option (see https://github.com/facebook/create-react-app/issues/6296#issuecomment-461637016) and none of them fixed the problem described in #6296 where the webpack sourcemap content doesn’t match the original source files in node_modules.

But regardless I’ll definitely try the new release to see if some other commit helps.

justingrant on Feb 10, 2019

No, it doesn’t sound related. This issue is about jest tests specifically. I can take a look at your issue when I have a minute.

roblourens on Dec 17, 2018

Not sure if this is the right thing to do here but I submitted babel/babel#8868

I have no idea what I’m doing.

ryan-mars on Oct 13, 2018

We will be releasing a new version including the change made in https://github.com/facebook/create-react-app/pull/5060 shortly. I hope this may improve some of these issues you’re experiencing.

ianschmitz on Feb 10, 2019

You are right that the first two problems are separate issues. webpack/webpack#8302 is interesting, thanks for pointing that out. I don’t know whether it directly relates to #6296 but it doesn’t sound like it would help.

roblourens on Feb 2, 2019

For anyone using the new flag in vscode Insiders, I’ve removed the underscore and it will be in the next stable release. I recommend using the flag for debugging tests with Jest/CRA:

"disableOptimisticBPs": true

Also, work is in progress to give Node the ability to pause on script load: https://github.com/nodejs/node/issues/24687

This will help vscode with this issue, because it will be able to pause when your test script is loaded, load the sourcemap, set breakpoints correctly, then continue execution.

roblourens on Nov 30, 2018

I am unable to hit the breakpoint. why this issue is closed? and what is the configuration file as I don’t wanna eject and using cra2 I can’t change my jest version

khaled-hossain-code on Nov 10, 2018

Ok I was able to create a project with create-react-app@1, and I do see that it sets retainLines in node_modules/babel-jest/build/index.js. I think that bringing that back is the best fix. I’ll try to do a PR for babel-jest.

roblourens on Oct 10, 2018