Create-react-app: node --inspect appears to be broken or unsupported

[nickmccurdy]

See https://github.com/facebook/jest/issues/1652. As of this issue being fixed in Jest and Node 8.4, this should be fixed in create-react-app but I can't get it to work.

Is this a bug report?

Yes

Can you also reproduce the problem with npm 4.x?

Yes

Which terms did you search for in User Guide?

inspect

Environment

1. node -v: v8.4.0
2. npm -v: 4.6.1 and 5.3.0 (confirmed on both versions)
3. npm ls react-scripts: 1.0.11
4. Operating system: macOS
5. Browser and version: Google Chrome Version 60.0.3112.101 (Official Build) (64-bit)

Steps to Reproduce

1. Open chrome://inspect/#devices in Chromium.
2. Enable networking and forward localhost:9229.
3. Set a debugger breakpoint in a test file.
4. node --inspect-brk node_modules/.bin/react-scripts test
5. Inspect the target in Chromium.
6. Resume script execution.
7. Wait for tests to complete/break.

Expected Behavior

Chromium debugger stops on debugger breakpoint.

Actual Behavior

Chromium debugger doesn't stop on breakpoint and remains at the beginning of the script.

[0xcaff]

I'm experiencing the same issue when running jest directly with

node --inspect --inspect-brk node_modules/jest/bin/jest.js --watch
node --version
v8.4.0

npm ls | grep "jest"
├─┬ [email protected]              
│ └─┬ [email protected]        
│   ├── [email protected]                          
│   ├─┬ [email protected]   
│   │ ├── [email protected] deduped            
│   │ ├─┬ [email protected]                     
│   │ │ ├── [email protected] deduped                       
│   │ │ └── [email protected] deduped                       
│   │ ├── [email protected] deduped                     
│   │ ├─┬ [email protected]                        
│   │ ├── [email protected] deduped                   
│   │ ├─┬ [email protected]
│   │ ├─┬ [email protected]                             
│   │ │ ├── [email protected] deduped              
│   ├── [email protected] 
│   ├─┬ [email protected]                      
│   │ ├── [email protected]   
│   │ ├── [email protected] deduped                         
│   ├─┬ [email protected]
│   │ ├── [email protected] deduped                     
│   ├─┬ [email protected] 
│   │ ├─┬ [email protected]   
│   │ │ ├── [email protected] deduped              
│   │ ├── [email protected] deduped                
│   │ ├─┬ [email protected]                             
│   │ │ ├── [email protected] deduped                       
│   │ │ ├── [email protected] deduped              
│   │ │ ├── [email protected] deduped               
│   │ │ └── [email protected] deduped                 
│   │ ├── [email protected] deduped                 
│   │ ├── [email protected] deduped                     
│   ├─┬ [email protected]                           
│   ├── [email protected]                             
│   ├─┬ [email protected]                   
│   │ └── [email protected] deduped                   
│   ├─┬ [email protected]  
│   │ ├─┬ [email protected]  
│   │ │ └─┬ [email protected]                       
│   │ │   └── [email protected]               
│   │ ├── [email protected] deduped                       
│   │ ├── [email protected] deduped                    
│   │ ├── [email protected] deduped                   
│   │ ├── [email protected] deduped                      
│   │ ├── [email protected] deduped                         
│   ├─┬ [email protected] 
│   │ ├── [email protected] deduped                         
│   │ ├── [email protected] deduped                
│   │ ├── [email protected] deduped                         
│   ├─┬ [email protected]     
│   │ ├── [email protected] deduped                 
│   │ ├── [email protected] deduped                         
│   │ ├── [email protected] deduped                     

[0xcaff]

One of the following changes worked for me:

1. Using node --inspect-brk node_modules/.bin/jest --watch
2. Not using Open dedicated DevTools for Node in chrome://inspect.

[Timer]

Where did you find these instructions? Or are you trying something specific that you think may work?

If these are instructions, they're incorrect -- we have yet to document them.
Please link me so I may comment on them and correct them. 😄

Try this instead:

./node_modules/.bin/react-scripts --inspect-brk test -- --runInBand

[nickmccurdy]

@0xcaff Running Jest directly (in other projects) works fine for me. I guess it was related to using the different binary path. Also I didn't use Open dedicated DevTools for Node, but that's interesting too.

@Timer I adapted https://github.com/facebook/jest/issues/1652#issuecomment-322834017 for react-scripts thinking it should work (I can't call jest directly because I would be missing CRA support). Unfortunately if I --runInBand, I get an Invalid testPattern error and Babel stops transpiling JSX, which breaks my test suite. If I run it without it, it doesn't stop on my breakpoint (same issue).

[gaearon]

I don't think you need extra -- there. It's only needed when you npm test. Try removing it in above command.

[Timer]

Sorry @nickmccurdy, this should do it:

./node_modules/.bin/react-scripts --inspect-brk test --env=jsdom --runInBand

[nickmccurdy]

Thanks, it works! I can remove the leading ./ and --env=jsdom which my suite doesn't rely on. I still need to leave --runInBand enabled, which is odd since Jest itself seems to support breakpoints out of band. This works fine for now though.

Should we close this and/or document @Timer's command in the User Guide? Personally I'd rather leave this open until it's documented, though technically my original issue was invalid since it seems I wasn't using the right command anyway.

[gaearon]

We need to add a more ergonomic way of running it that doesn't require specifying --runInBand manually and then document it.

[nickmccurdy]

Should we open another issue for that?

[Timer]

That issue already exists :); we can close this. Thanks!

[nickmccurdy]

I agree with closing this issue, but where can I find the other issue so I can subscribe?

[Timer]

https://github.com/facebookincubator/create-react-app/issues/594 and https://github.com/facebookincubator/create-react-app/pull/2041