Vscode-react-native: Breakpoints do not get hit in vscode 1.6.0 insiders build

[neilyoung]

react-native init Hello
cd Hello
code .
Debug iOS

[vscode-react-native] [Warning] Failed to prepare the JavaScript runtime environment. Message:
[object Object]. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

[MSLaguana]

What version of node do you have installed? It looks like your app is trying to run some JS using es6 syntax which isn't supported prior to node 6.

[neilyoung]

My "app" is what react-native is scaffolding. node version is 5.1.1

Here is "my glorious app":

/**
  * Sample React Native App
  * https://github.com/facebook/react-native
  * @flow
  */

 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   Text,
   View
 } from 'react-native';

 class Hello extends Component {
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native!
         </Text>
         <Text style={styles.instructions}>
           To get started, edit index.ios.js
         </Text>
         <Text style={styles.instructions}>
           Press Cmd+R to reload,{'\n'}
           Cmd+D or shake for dev menu
         </Text>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
 });

 AppRegistry.registerComponent('Hello', () => Hello);

[neilyoung]

BTW: The "app" is working fine in simulator. I just wanted to "debug", what else is your plugin for?

[MSLaguana]

I have just followed the same steps as you initially posted, except with node 6.3.1 installed, and I was successfully able to debug.

When we debug a react-native application we run it in our own environment, which is node for us. If your react-native application uses features that your version of node do not support, that could cause the error message that you report. I suggest upgrading to node 6 and trying to debug again.

[MSLaguana]

I also just downgraded to node 5.1.1 and reproduced your issue. I suspect that internal parts of react-native use es6 features and so while "your" part of the app (in index.ios.js) may not use any of these features, the app as a whole would. I also suspect that this is a relatively recent change, since I have run older versions of react-native on older versions of node in the past.

For now, if you wish to use react-native 0.34, upgrading to node 6 would be the best approach.

[neilyoung]

Yes, thanks. Upgrading to node 6.6 did help to get rid of the error message. But breakpoints are still not hit, and this is my problem as long as I deal with react-native and vscode. The error above was just something new after having left aside the entire suff for month.

[neilyoung]

I'm having sourcemap files at proper location, but nothing helps. No stop.

[MSLaguana]

Does this occur with the basic app you showed above, if you add a console.log line before the return (... of the render function and set the breakpoint on it? There have been issues in the past with how react-native constructs sourcemaps with JSX in them which cause breakpoints to be set in the wrong location.

[neilyoung]

It doesn't stop at "console.log()"

EDIT: I don't have that .babelrc file in this project, nevertheless there are sourcemap files in .vscode/.react

EDIT2: But even with this file no change

[MSLaguana]

I've just tried to reproduce the issue with vscode 1.5.3, node 6.6.0 and our extension 0.2.0, and I successfully hit the breakpoint set in the render() function. Apart from adding the log statement, have you modified the react-native init project at all?

[neilyoung]

[neilyoung]

No I have not modified it. I also using your plugin 0.2.0, code insiders version 1.6.0

EDIT: But I should be able to try 1.5.3 as well. Please wait

[neilyoung]

Ha... with 1.5.3 it works...

EDIT: It does not work inside TexInput onSubmitEditing event handler

[MSLaguana]

Yeah, looks like this is some kind of breaking change in the next version. We'll have a look and see what's happened. Thanks for bringing this to our attention.

[neilyoung]

Thanks for your extraordinary help. The best I got from MS within the last 30 years :) Sorry for the rant, I was just so p...d

[neilyoung]

As a side info regarding "Does not stop in onSubmitEdtiting event handler with 1.5.3: If there is a breakpoint set the function is not even executed. Seems to get stuck, but breakpoint is not hit.

EDIT: Yepp. Your plugin hangs. After hitting "CTRL_R" in simulator window the app complains about "Runtime not ready for debugging"

[MSLaguana]

I believe that's a bug in node 6, unfortunately. It sounds similar to https://github.com/Microsoft/vscode-react-native/issues/273

If that's the case, then there's not a lot we can do unfortunately since node itself seems to be hitting the breakpoint and stopping execution, but not reporting that fact to the debugger which is attached to it. As a workaround, if you manually hit "pause" it should show up as stopped at the breakpoint, and then you can continue debugging. Definitely not optimal, but it's something.

[neilyoung]

Yeah, cool. Sounds reasonable. Very thin ice, it seems :) However, many thanks for your help again.

[neilyoung]

Accidently closed it, sorry

[neilyoung]

Just to let you know: Your "pause" hint works, but there is no way to inspect variables and stuff.
Not such a thing, if one knows.

[MSLaguana]

I've started looking into the issue with vscode insiders 1.6.0, and it looks like the node debugger that we depend on has made some changes in how they handle source maps which break us. We'll have to adapt to deal with that before breakpoints work in the next vscode release.

[vladimir-kotikov]

Relevant issue: https://github.com/Microsoft/vscode-node-debug/issues/97