Vscode-react-native: Debug in exponent does not run or produce any kind of error

[mtrivolli]

Actual Behavior

1. "Debug in exponent" option in vscode does not produce any result. It seems to wait for something

Expected Behavior

1. Launch the packager and show expo QR code

Software versions

• React-Native VS Code extension version: 0.6.1
• VSCode version: 1.20.1
• OS platform and version: OSX Sierra 10.12.6
• NodeJS version: 8.9.4
• React Native version: 0.52.0

Outputs (Include if relevant)

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

OS: darwin x64
Adapter node: v7.9.0 x64
vscode-chrome-debug-core: 3.23.0

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox): no react-native in listbox, but some errors in extensions

{ Error: connect ENOENT /tmp/vscode-reactnative-b14cff98e8ffc692af84360a79508a440478f3fa67ecc65d64751eca479b886a.sock
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'connect',
  address: '/tmp/vscode-reactnative-b14cff98e8ffc692af84360a79508a440478f3fa67ecc65d64751eca479b886a.sock' }

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

console.ts:123 [Extension Host] Activating extension `vsmobile.vscode-react-native` failed:  Cannot find module 'app-center-node-client'
t.log @ console.ts:123
console.ts:123 [Extension Host] Here is the error stack:  Error: Cannot find module 'app-center-node-client'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:664:413)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/vmorilla/.vscode/extensions/vsmobile.vscode-react-native-0.6.1/src/extension/appcenter/api/index.js:5:34)
    at Object.<anonymous> (/Users/vmorilla/.vscode/extensions/vsmobile.vscode-react-native-0.6.1/src/extension/appcenter/api/index.js:15:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
extensionService.ts:787 Activating extension `vsmobile.vscode-react-native` failed: Cannot find module 'app-center-node-client'.
R._logMessageInConsole @ extensionService.ts:787

Additional information

This issue can be reproduced with a minimal application created with create-react-native-app

Thanks for your work!

[asaravi]

I can also confirm I'm having this same issue, with the same output in Developer tools console.

Software versions:

• React-Native VS Code extension version: 0.6.1
• VSCode version: 1.20.1
• OS platform and version: Windows 10, version 1703, build 15063.909
• NodeJS version: 8.9.1
• React Native version: 0.52.0

[ldwight]

VS Code: Version 1.20.1

React-Native VS Code extension version: 0.6.1
OSX 10.13.3
Node 9.4.0
react-native-cli: 2.0.1
react-native: 0.52.0

I am having the same issue BUT- it works the first time I run it! After that, even uninstalling & reinstalling React Native Tools extension does not revive me.

Toggled "developer Tools" and see:

vsmobile.vscode-react-native` failed: Cannot find module 'app-center-node-client'.

full screen attached.

Thank you

[scolestock]

I can also confirm I'm having this same issue, with the same output in Developer tools console.

Software versions:

React-Native VS Code extension version: 0.6.2
VSCode version: 1.20.1
OS platform and version: macOS 10.13.3
NodeJS version: 8.9.1
React Native version: 0.52.0

Output:

{ Error: connect ENOENT /tmp/vscode-reactnative-6e8d5c66a6b6ee68087ee4366e492217296e1441eb7a925f408e417a2d91a364.sock
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'connect',
  address: '/tmp/vscode-reactnative-6e8d5c66a6b6ee68087ee4366e492217296e1441eb7a925f408e417a2d91a364.sock' }{ Error: connect ENOENT /tmp/vscode-reactnative-6e8d5c66a6b6ee68087ee4366e492217296e1441eb7a925f408e417a2d91a364.sock
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'connect',
  address: '/tmp/vscode-reactnative-6e8d5c66a6b6ee68087ee4366e492217296e1441eb7a925f408e417a2d91a364.sock' }

And in dev tools:

/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:4183 Activating extension `vsmobile.vscode-react-native` failed: Cannot find module 'app-center-node-client'.
R._logMessageInConsole  @   /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:4183

[Gremlin80]

same issue encoutered. the extesions allow for a " debug once " feature. .....
uninstalling the extension does not work, however, completely clear the .vscode/extensions folder allow for another debug session....

[Gremlin80]

is there a way to downgrade to pre 0.6.x version of react-native-tools?

[scolestock]

@Gremlin80 I tried uninstalling the extension and then installing a previous version by downloading from this link (formulated following instructions on a stackoverflow article):

https://ms-vscode.gallery.vsassets.io/_apis/public/gallery/publisher/vsmobile/extension/vscode-react-native/0.6.0/assetbyname/Microsoft.VisualStudio.Services.VSIXPackage

Rename file extension to VSIX, then use the ellipses button in the extensions panel (mac) to "install from VSIX".

However, I found that while the debugger ran and I get console output, no breakpoints were hit...

[Gremlin80]

@scolestock . i'm pretty sure that if you replace a breakpoint on (say: line 11) with the corresponding debugger;instruction, the execution stops.

maybe somewhat related to sourcemaps ?

[nahuelhds]

This happens to my in Code and Code Insiders as well. First, I thought it was an insiders issue, but I cannot make it work in any of those softwares... anyone could make this work?

[nahuelhds]

I've downgraded to 0.6.1 by following this steps:

1. First of all, download the vsix extension from here (thanks @scolestock).
2. Rename the file's extension to .vsix
3. In VSCode settings, set "extensions.autoUpdate": false

Then, do this every time you restart Code:

1. Delete the extension folder from ~/.vscode/extensions/vsmobile.vscode-react-native-0.6.1
2. Installed the 0.6.1 from the vsix

That worked for me in both Code and Code Insiders as well. Annoying as it has to be done everytime but at least is something...

Hope it helps.

[nahuelhds]

Well... more news: the problematic command is reactNative.startExponentPackager. Executing it brokes the extension after restarting Code.

The problem starts happening when that command finishes the "Checking if this is Expo app......" part. Maybe is related to the npm install that this process does, which isnpm install xdl @expo/ngrok --verbose --no-save.

If you run the command reactNative.startPackager the extension works just fine even after restart the software.

So, in my case where I use Expo, the solution was stop using reactNative.startExponentPackager and deploy the packager using XDE Expo software and debug normally as I do with this extension.

In conclusion, this is a 0.6.x regression issue. So, my recommendation is:

1. If you already has this "command not found" issue when trying to use any of the reactNative.* commands, go to ~/.vscode/extensions and delete the folder vsmobile.vscode-react-native-x.y.z
2. Install the extension normally in Code and through the vsix extension (it's the same).
3. Download and install Expo XDE
4. With Expo XDE, open your project and wait for it to give you the message Project opened! in the logs.
5. Go to Code and Attach the packager as you normally do. Be sure to have the same packagerPort value given in /.expo/packager-info.json in your "react-native.packager.port" option at /.vscode/settings.json file (19001 in my case).

By doing this, I can use the debugger and breakpoints and after resetting Code it continues working without any problems.

Hope this helps to anybody.

[ruslan-bikkinin]

Hi guys, I was able to reproduce it. I am working on a fix now so I'll keep you posted if there will be any news.

[ruslan-bikkinin]

Well, after further investigation I figured that there was no real bug in my case - just a prolonged delay during extension work that led to timeout error on my machine. Anyway, I was able to reach "Expo QR code" step without errors using 0.6.3 version on a second try.
@mtrivolli @nahuelhds could you please try to debug your app using this version and let me know whether it works?

[nahuelhds]

Will do. You meant 0.6.3 right?

[ruslan-bikkinin]

@nahuelhds yes, you are right) just a typo.

[nahuelhds]

Hey @ruslan-bikkinin. I'm sorry to say that it doesn't work for me after the first time I execute reactNative.startExponentPackager. As before, the second time I try it shows the reactNative.* command not found message. No matters which one of the commands I try.

As I mentioned above, it starts happening once the "Checking if this is Expo app..." is done. I don't know if that helps you in any way.

[ruslan-bikkinin]

@nahuelhds In this case I will try again tomorrow and give you exact steps I followed so you could point me what I am missing now.

[nahuelhds]

I leave what I do for getting the errors:

1. Uninstall the extension from Code.
2. Delete the folder from ~/.vscode/extensions/
3. Install the extension again.
4. Go to a RN project and run > React Native: Start Exponent Packager
5. Wait for it to finish the entire process.
6. Close the app (cmd + Q)
7. Reopen the app, the project and try the same command.
8. You will see reactNative.startExponenPackager not found.

[mtrivolli]

Same behaviour as @nahuelhds describes

[ruslan-bikkinin]

@nahuelhds @mtrivolli Did you ran this command immediately after your project has opened? I was able to get Command reactNative.startExponenPackager not found if I did so but when I waited a little bit for extensions to be be loaded on the second try this message didn't appear.

[nahuelhds]

@ruslan-bikkinin no. I know that "bug" and I wait for the IDE to finish loading before trying it =)

[nahuelhds]

The issue is not about the command but about that the extension cannot load the app-center-node-client module at load time. If I open the IDE and then open the DevTools I see the error. See (no command executed yet):

[nahuelhds]

That doesn't happen when you've just installed the extension

[nahuelhds]

Remember I've also mentioned that the "Checking the Expo app" process, executes this npm command npm install xdl @expo/ngrok --verbose --no-save which give some errors. Maybe that's related @ruslan-bikkinin

[scolestock]

@nahuelhds Your technique above (cleaning up, using the Expo packager, and then using "Attach to packager") is working somewhat for me - but with the curious behavior that I have to turn breakpoints on and off every time I reload the JS bundle in order to get execution to break.

It will be awesome to have this whole extension working again - this was my primary workflow.

Edit: I guess having to re-establish breakpoints is exactly what the chrome-hosted debugger requires after reloading, so perhaps that is expected behavior when using "attach".

[ruslan-bikkinin]

Thanks guys, I finally could reproduce it and working on a fix now.

[ruslan-bikkinin]

@mtrivolli @scolestock @nahuelhds I have made a fix for this: #655. Could you, guys, please take a look on it and check whether it works for you? To test the fixed version of extension please do the following:

1. Uninstall current version of extension.
2. Create build of extension from my branch using these commands:

cd /your/preferred/directory
git clone https://github.com/ruslan-bikkinin/vscode-react-native.git
cd vscode-react-native
git checkout remove-file-dependency
npm i -g gulp
npm i
npm i -g vsce
gulp release

1. Install fixed version of extension by clicking Extensions -> ... -> Install from VSIX... and selecting /your/preferred/directory/vscode-react-native/vscode-react-native-0.6.3.vsix.

[nahuelhds]

It gives me error when doing gulp release (I've done every command you mentioned) @ruslan-bikkinin

My output

[12:01:16] Using gulpfile ~/Sites/vscode-react-native/gulpfile.js
[12:01:16] Starting 'check-imports'...
[12:01:16] Starting 'check-copyright'...
[12:01:19] Finished 'check-imports' after 2.71 s
[12:01:19] Finished 'check-copyright' after 2.71 s
[12:01:19] Starting 'build'...
[12:01:19] Building with preprocessor context: {"PROD":true}
[12:01:22] Finished 'build' after 3.1 s
[12:01:22] Starting 'release'...
Backing up license files to /var/folders/7k/84zxbl115dld560bwv6hhwbr0000gp/T/vscode-react-native...
Preparing license files for release...
Creating release package...
Restoring modified files...
[12:01:22] 'release' errored after 11 ms
[12:01:22] Error: An error occurred. Error: spawn vsce ENOENT
    at formatError (/usr/local/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/usr/local/lib/node_modules/gulp/bin/gulp.js:195:15)
    at Gulp.emit (events.js:159:13)
    at Gulp.Orchestrator._emitTaskDone (/Users/nahuelhds/Sites/vscode-react-native/node_modules/orchestrator/index.js:264:8)
    at /Users/nahuelhds/Sites/vscode-react-native/node_modules/orchestrator/index.js:275:23
    at finish (/Users/nahuelhds/Sites/vscode-react-native/node_modules/orchestrator/lib/runTask.js:21:8)
    at /Users/nahuelhds/Sites/vscode-react-native/node_modules/orchestrator/lib/runTask.js:45:4
    at _rejected (/Users/nahuelhds/Sites/vscode-react-native/node_modules/q/q.js:844:24)
    at /Users/nahuelhds/Sites/vscode-react-native/node_modules/q/q.js:870:30
    at Promise.when (/Users/nahuelhds/Sites/vscode-react-native/node_modules/q/q.js:1122:31)

[ruslan-bikkinin]

@nahuelhds oh, sorry for that. I forgot to mention that you need global vsce package installed too. I will update my previous message.

[mtrivolli]

The patch is working for me! Thank you!

[nahuelhds]

The new version 0.6.4 works excellent for me. Thanks @ruslan-bikkinin 🎉

[ldwight]

sorry to be a dummy, but I have many extensions involved in this debug. When you write:
"Uninstall current version of extension." I am not clear on which extension.
If it is the VSCode extension (as is implied by your instructions), how do I do that?
Thanks!

[nahuelhds]

@ldwight 0.6.4 doesn't work for you? it does for me.

Anyway about your question: yes, it's about removing the extension from VSCode program itself and then remove the folder in the extensions folders as well. In my case is ~/.vscode/extensions/vsmobile.vscode-react-native-x.y.z

Hope it helps

[ldwight]

@nahuelhds - well hot diggety! 0.6.4 is working - hooray! Thanks for making me look twice .

[ruslan-bikkinin]

Yeah, guys, sorry for not mentioning that, but fix already in 0.6.4.

[veedeo]

I still have this issue with 0.6.4
When launching Debug IOS - debugger hangs and nothing happens;
Debug console

OS: darwin x64
Adapter node: v7.9.0 x64
vscode-chrome-debug-core: 3.23.0

Output
{ Error: connect ENOENT /tmp/vscode-reactnative-7c08c89fe80d339aeae7a6c35c138afb1c1880125c7bf0446f59a69a1b12bec1.sock at Object.exports._errnoException (util.js:1050:11) at exports._exceptionWithHostPort (util.js:1073:20) at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14) code: 'ENOENT', errno: 'ENOENT', syscall: 'connect',

[ruslan-bikkinin]

Hi @veedeo. I don't think this is the same issue. More likely it's related to https://github.com/Microsoft/vscode-react-native/issues/646.

[jhalborg]

I'm getting this issue with 0.6.10 @ruslan-bikkinin

OS: darwin x64
Adapter node: v7.9.0 x64
vscode-chrome-debug-core: 3.17.3

{ Error: connect ENOENT /tmp/vscode-reactnative-3ac6a0299f88064cac596ab8d8463ced9844a1d6805afefc4da3790e722144e7.sock
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'connect',
  address: '/tmp/vscode-reactnative-3ac6a0299f88064cac596ab8d8463ced9844a1d6805afefc4da3790e722144e7.sock' }{ Error: connect ENOENT /tmp/vscode-reactnative-3ac6a0299f88064cac596ab8d8463ced9844a1d6805afefc4da3790e722144e7.sock
    at Object.exports._errnoException (util.js:1050:11)
    at exports._exceptionWithHostPort (util.js:1073:20)
    at PipeConnectWrap.afterConnect [as oncomplete] (net.js:1097:14)
  code: 'ENOENT',
  errno: 'ENOENT',
  syscall: 'connect',
  address: '/tmp/vscode-reactnative-3ac6a0299f88064cac596ab8d8463ced9844a1d6805afefc4da3790e722144e7.sock' }

[ruslan-bikkinin]

Hi @jhalborg and thanks for your feedback. Fix for this already in PRs: https://github.com/Microsoft/vscode-react-native/pull/717. Could you please try it on your machine and let me know whether it helps you? To test it please do the following:

1. Run these commands:

git clone [email protected]:ruslan-bikkinin/vscode-react-native.git
cd vscode-react-native
git checkout fix-enoent-socket-error
npm i 

1. Open vscode-react-native directory in VS Code, click on Debug icon, then select Quick Launch Extension in drop down menu and run it.
2. Wait for another instance of VS Code to be appeared (it will be named like Extension Development Host...), then open your project in it and try to reproduce issue.

Also, be aware that I have created separate issue https://github.com/Microsoft/vscode-react-native/issues/716 for this, so please don't hesitate to post your feedback there instead of this thread.