Vscode-react-native: React-Native 0.45 Remote Debugging Blank

[Amurmurmur]

Actual Behavior

1. When enabling Remote debugging the app just stays blank, though when using Debugging in Chrome, debugger works as expected.

Expected Behavior

1. The output should keep printing into the console and debugging of JS should work as it did with RN 0.44

Software versions

• React-Native VS Code extension version: 0.3.2
• VSCode version: 1.12.2
• OS platform and version: macOS Sierra 10.12.5
• NodeJS version: 8.0.0
• React Native version: 0.45.0

Outputs (Include if relevant)

• Output of the Debug Console (View -> Toggle Debug Console):

** BUILD SUCCEEDED **
Installing build/Build/Products/Debug-iphonesimulator/example.app
Launching com.example.example
com.example.example: 55888
[vscode-react-native] Finished executing: react-native run-ios --simulator iPhone 5s --project-path ios
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 4413
(node:55919) [DEP0062] DeprecationWarning: `node --inspect --debug-brk` is deprecated. Please use `node --inspect-brk` instead.
Warning: PropTypes has been moved to a separate package. Accessing React.PropTypes is no longer supported and will be removed completely in React 16. Use the prop-types package on npm instead. (https://fb.me/migrating-from-react-proptypes)
Warning: React.createClass is no longer supported. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement. (https://fb.me/migrating-from-react-create-class)
Warning: View.propTypes has been deprecated and will be removed in a future version of ReactNative. Use ViewPropTypes instead.

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

######### Executing command: react-native start --port 8081 ##########
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/amurmurmur/exampleapp 


React packager ready.

######### Packager started. ##########
Loading dependency graph, done.
Bundling `index.ios.js`  100.0% (1274/1274), done.
######### The Bundle Cache was prewarmed. ##########
Bundling `index.ios.js`  100.0% (1274/1274), done.
Starting custom debugger by executing: echo A debugger is not needed:  "/Users/amurmurmur/exampleapp"

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

mime.ts:59Overwriting extension <<.jsx>> to now point to mime <<text/javascript>>
(anonymous) @ mime.ts:59
extensionHost.ts:285[Extension Host] vscode-icons is active!
extensionHost.ts:285[Extension Host] (node:44970) DeprecationWarning: os.tmpDir() is deprecated. Use os.tmpdir() instead.
d.logExtensionHostMessage @ extensionHost.ts:285
extensionHost.ts:285[Extension Host] Error: The module '/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/build/Release/DTraceProviderBindings.node'
was compiled against a different Node.js version using
NODE_MODULE_VERSION 51. This version of Node.js requires
NODE_MODULE_VERSION 53. Please try re-compiling or re-installing
the module (for instance, using `npm rebuild` or`npm install`).
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:173:20)
    at Object.Module._extensions..node (module.js:598:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:173:20)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Function.Y.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:366378)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/dtrace-provider.js:17:23)
d.logExtensionHostMessage @ extensionHost.ts:285
extensionHost.ts:285[Extension Host] Error: Cannot find module './build/default/DTraceProviderBindings'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Function.Y.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:366378)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/dtrace-provider.js:17:23)
    at Object.<anonymous> (/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/dtrace-provider.js:42:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
d.logExtensionHostMessage @ extensionHost.ts:285
extensionHost.ts:285[Extension Host] Error: Cannot find module './build/Debug/DTraceProviderBindings'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Function.Y.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:4:366378)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/dtrace-provider.js:17:23)
    at Object.<anonymous> (/Users/amurmurmur/.vscode/extensions/vsmobile.vscode-react-native-0.3.2/node_modules/dtrace-provider/dtrace-provider.js:42:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
d.logExtensionHostMessage @ extensionHost.ts:285
shell.ts:474[FileWatcher] terminated unexpectedly and is restarted again...
e.onUnexpectedError @ shell.ts:474
ipc.cp.ts:183IPC "Watcher" crashed with exit code null
(anonymous) @ ipc.cp.ts:183
messageService.ts:125The terminal process terminated with exit code: 1
e.doShow @ messageService.ts:125
2extensionHost.ts:285[Extension Host] TextEditor disposed

[jbreuer95]

+1

[zeflash]

Yes! It took me 3 hours to figure out what was wrong with my setup (first try at debugging an RN app) - I used the very latest version of RN.
Going back to 0.44 works. So much better!

[iTOYS]

I tried to reproduce this issue, but i haven't had this problem.

macOS Sierra 10.12.5
VSCode 1.13.1
Extension 0.3.2
Node v8.1.3
Xcode 8.3.3

App was initialized with:
react-native init AwesomeProject [email protected]

@Amurmurmur @zeflash
Please, can you make some example app for this case?

[ulentini]

@iTOYS are you able to debug? Once I start the remote debugging it reloads and then, blank screen. If I turn it off, it reloads and it works.

This is my setup:
macOS Sierra 10.12.5
VSCode 1.13.1
Extension 0.3.2
Node v8.1.3
Xcode 8.3.2

I initialized a test project as you did (same command) to be sure it wasn't an additional module issue.

Using [email protected], it works.

[iTOYS]

@Uby501 you are right, debugger was disabled, reproduced now.
Thanks!

[fnicastri]

same problem here.
macOS Sierra 10.12.5
VSCode 1.13.1
Extension 0.3.2
Node v6.11.0 or v8.1.3
react-native 0.45.0/0.45.1/0.46.0

I have no problem debugging with chrome or react-native 0.44.0 on VSCode

Thanks

[fnicastri]

@Uby501 Thanks! you saved my day!

[RoJoHub]

+1
same as 0.46

[asimolmez]

Please do not write change version to 0.44 also use chrome debug.It is not the main solution for this case!

[vladimir-kotikov]

@Amurmurmur, @jbreuer95, @Uby501, the fix has been merged into master. I would appreciate if anyone could test it. Thanks

[ulentini]

@vladimir-kotikov It works now.
Thanks 🎉
Do you know when you're going to update the extension on the marketplace?

[vladimir-kotikov]

Awesome, thank you guys for testing! I plan to work on releasing new version in a coule of days.

[RoJoHub]

@vladimir-kotikov
In vscode store ,version of tool is still 0.32.

When do you go to the release?

I'm new to here.

Thanks.

[peterjuras]

Any news on the release in the extensions store?