Vscode-react-native: React Native doesn't appear as an option for environments

[victorias]

Actual Behavior

1. Click gear symbol in debug tab
2. Select Environment shows only: Node, Chrome

Expected Behavior

1. Click gear symbol in debug tab
2. Select Environment should also have React Native

Software versions

• React-Native VS Code extension version: 0.6.4
• VSCode version: 1.20.1
• OS platform and version: Darwin x64 17.3.0
• NodeJS version: 9.7.1
• React Native version: 2.0.1 (fwiw we use haul: 1.0.0-beta.11)

The only plugins I have installed are React Native Tools and the Debugger for Chrome.

[devtobo]

Edit: Nevermind, I see it after restarting VS Code. Reload Window was not enough.

Same problem here

React-Native VS Code extension version: 0.6.4
VSCode version: 1.21.0
MacOS 10.12.6 (16G1114)
Node v9.4.0
react-native-cli: 2.0.1
react-native: 0.54.0

[code-matt]

same thing here

[max-mironov]

@victorias, @code-matt just have tried it with VSCode 1.21 (I'm on mac) and don't see any issues with it.
What I could suggest to try if the issue is still active for you:
1) update vscode to latest version if it is not already
2) remove vscode rn extension and close/open vscode
3) remove launch.json (backup it if needed)
4) install vscode rn extension again and close/open vscode
5) check to see if it works for you and let us know the results

[code-matt]

@max-mironov I created a blank launch.json and closed and reopened vscode and the option for React Native was there!

Restarting vscode and/or removing&installing the plugin was not doing it.

[max-mironov]

Thanks for reply @code-matt! Glad to see that the issue was resolved for you.
@victorias could you please try one of this options and let us know if it helped?

[victorias]

Thanks for your guidance, but unfortunately it doesn't seem to show up in the UI : However, React Native targets are available in the intellisense autocomplete within launch.json, which I'm assuming is enough to use the extension?

[azterix]

I am also having issues with this. I tried with an expo project and non-expo project. I have tried the different approaches mentioned above but am having no luck getting the React Native option to show up.

vscode-react-native 0.6.6
VSCode 1.21.1
Mac OS 10.13.3
react-native-cli 2.0.1
node 9.8.0

[privateOmega]

I too am facing this issue. This is a starter project and I don't think it has anything to do with the components used.
vscode 1.21.1
Ubuntu 16.04 x64
React Native tools 0.6.6
React-Native cli 2.0.1

[ruslan-bikkinin]

Hi guys
Could anyone who experiencing such a problem do the following steps? That would really help us to determine the cause of it:

1. Open your project on which you have an issue in VS Code.
2. Re-open VS Code - your project should be opened again (this is important).
3. Copy text from Output->Log (Extension Host) and attach it here.
4. Click Debug->gear icon, make sure there is no React Native item in the popup menu.
5. Copy text from Output->Log (Extension Host) again and attach it here.

[ronaldroe]

@ruslan-bikkinin I'm not sure if you're wanting the entire log, or just the RN Tools bits, but here's the whole thing:

[2018-03-29 10:33:51.678] [exthost1] [info] extension host started
[2018-03-29 10:33:51.702] [exthost1] [info] ExtensionService#_doActivateExtension vscode.emmet {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:51.702] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\emmet\out\extension
[2018-03-29 10:33:51.797] [exthost1] [info] ExtensionService#_doActivateExtension vscode.git {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:51.797] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\git\out\main
[2018-03-29 10:33:51.963] [exthost1] [info] ExtensionService#_doActivateExtension vscode.merge-conflict {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:51.963] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\merge-conflict\out\extension
[2018-03-29 10:33:51.983] [exthost1] [info] ExtensionService#_doActivateExtension Shan.code-settings-sync {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:51.983] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\Shan.code-settings-sync-2.9.0\out\src\extension
[2018-03-29 10:33:52.469] [exthost1] [info] ExtensionService#_doActivateExtension dbaeumer.vscode-eslint {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:52.469] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\dbaeumer.vscode-eslint-1.4.8\client\out\extension
[2018-03-29 10:33:52.537] [exthost1] [info] ExtensionService#_doActivateExtension minhthai.vscode-todo-parser {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:52.537] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\minhthai.vscode-todo-parser-1.9.1\out\src\extension
[2018-03-29 10:33:52.594] [exthost1] [info] ExtensionService#_doActivateExtension robertohuertasm.vscode-icons {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:52.594] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\robertohuertasm.vscode-icons-7.22.0\out\src\
[2018-03-29 10:33:52.700] [exthost1] [info] ExtensionService#_doActivateExtension wayou.vscode-todo-highlight {"startup":true,"activationEvent":"*"}
[2018-03-29 10:33:52.700] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\wayou.vscode-todo-highlight-0.5.12\src\extension
[2018-03-29 10:33:52.708] [exthost1] [info] ExtensionService#_doActivateExtension vscode.typescript-language-features {"startup":false,"activationEvent":"onLanguage:javascript"}
[2018-03-29 10:33:52.708] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\typescript\out\extension
[2018-03-29 10:33:52.844] [exthost1] [info] ExtensionService#_doActivateExtension capaj.vscode-exports-autocomplete {"startup":false,"activationEvent":"onLanguage:javascript"}
[2018-03-29 10:33:52.844] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\capaj.vscode-exports-autocomplete-0.5.4\bootstrap
[2018-03-29 10:33:53.322] [exthost1] [info] ExtensionService#_doActivateExtension christian-kohler.npm-intellisense {"startup":false,"activationEvent":"onLanguage:javascript"}
[2018-03-29 10:33:53.322] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\christian-kohler.npm-intellisense-1.3.0\out\src\extension
[2018-03-29 10:33:53.339] [exthost1] [info] ExtensionService#_doActivateExtension vsmobile.cordova-tools {"startup":false,"activationEvent":"onLanguage:javascript"}
[2018-03-29 10:33:53.339] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\vsmobile.cordova-tools-1.3.8\out\src\cordova
[2018-03-29 10:33:55.373] [exthost1] [info] ExtensionService#_doActivateExtension ms-vscode.node-debug2 {"startup":true,"activationEvent":"workspaceContains:./node_modules/react-native/package.json"}
[2018-03-29 10:33:55.373] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\ms-vscode.node-debug2\out\src\extension
[2018-03-29 10:33:55.476] [exthost1] [info] ExtensionService#_doActivateExtension vsmobile.vscode-react-native {"startup":true,"activationEvent":"workspaceContains:./node_modules/react-native/package.json"}
[2018-03-29 10:33:55.476] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\vsmobile.vscode-react-native-0.6.6\src\extension\rn-extension
[2018-03-29 10:33:57.006] [exthost1] [info] eager extensions activated

And here's what was added after verifying there's not RN in the debug environment menu:

[2018-03-29 10:36:58.297] [exthost1] [info] ExtensionService#_doActivateExtension ms-vscode.node-debug {"startup":false,"activationEvent":"onDebugInitialConfigurations"}
[2018-03-29 10:36:58.297] [exthost1] [info] ExtensionService#loadCommonJSModule c:\Program Files\Microsoft VS Code\resources\app\extensions\ms-vscode.node-debug\out\node\extension\extension.js
[2018-03-29 10:36:58.317] [exthost1] [info] ExtensionService#_doActivateExtension msjsdiag.debugger-for-chrome {"startup":false,"activationEvent":"onDebugInitialConfigurations"}
[2018-03-29 10:36:58.317] [exthost1] [info] ExtensionService#loadCommonJSModule C:\Users\ronal\.vscode\extensions\msjsdiag.debugger-for-chrome-4.3.0\out\src\extension

EDIT
I restarted my computer, and the option shows up now. Before, I tried reloading VS Code, and closing and reopening it. Neither helped, but a full computer reboot did.

[iosdev-republicofapps]

I also see no react native environment in the debug configurations. Here's the log:

console.ts:136 [Extension Host] Here is the error stack:  Error: Cannot find module 'q'
    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:671:784)
    at Module.require (module.js:498:17)
    at Module.patchedRequire [as require] (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/git/node_modules/diagnostic-channel/dist/src/patchRequire.js:14:46)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/joel/.vscode/extensions/vsmobile.vscode-react-native-0.6.6/src/extension/rn-extension.js:5:11)
    at Object.<anonymous> (/Users/joel/.vscode/extensions/vsmobile.vscode-react-native-0.6.6/src/extension/rn-extension.js:190:3)
    at Module._compile (module.js:571:32)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Function.o._load (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/node/extensionHostProcess.js:671:784)
    at Module.require (module.js:498:17)
    at Module.patchedRequire [as require] (/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/git/node_modules/diagnostic-channel/dist/src/patchRequire.js:14:46)

I am on VSCode Version 1.21.1 (1.21.1). RN info:

Environment:
OS: macOS High Sierra 10.13.3
Node: 8.4.0
Yarn: Not Found
npm: 4.6.1
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Any ideas?

[iosdev-republicofapps]

@max-mironov your solution worked, thanks! However, VSCode does not seem to honor the ASCII color codes that are being emitted in the RN logs:
[33mLearn more about this warning here:
Is there any way to fix that?

[ruslan-bikkinin]

Hi guys, do you still experiencing this issue?

[chris-feist]

@ruslan-bikkinin I still don't have the option in VS Code 1.22.2

[xavi]

I had the same problem (gear symbol in debug tab didn't show a React Native option) until I realized that the folder of the project opened in VSCode was not the root of the React Native project, but the React Native project was within a subfolder. In fact, the README says

Open your React Native project root folder in VS Code

So I did that, I closed the project and reopened it in the React Native's project root folder (where there's package.json, app/, ios/, android/, etc), and it worked, now I see "React Native" when clicking the gear icon.

[sargunv]

I had this problem. Resolved it by closing VSCode, doing mkdir -p .vscode/.react; touch .vscode/.react/launch.json, then opening VSCode.

[ruslan-bikkinin]

Hi @f3ist Did you try these https://github.com/Microsoft/vscode-react-native/issues/661#issuecomment-385198868, https://github.com/Microsoft/vscode-react-native/issues/661#issuecomment-389438663, https://github.com/Microsoft/vscode-react-native/issues/661#issuecomment-372929835?

[chris-feist]

@ruslan-bikkinin I just upgraded to 1.23.1 and its there again

[mikeendale]

I was having the same issue and @sargunv's comment worked for me

[sargunv]

Looks like in certain situations this extension is not generating the launch.json file unless one exists already, and not showing the environment option until it exists.

[ruslan-bikkinin]

Hi guys, could you please check new version 0.6.10 of extension and let us know if it solves current problem?

[joebernard]

I experienced this issue today. The gear in the debug pane had a red alert circle on it and did not display the RN debug option. I followed the advice from @code-matt and manually created a blank launch.json. Wasn't sure where to put it, so I created it in my project root. Suddenly the React Native debugging option was there, and it had created a launch.json within the .vscode directory. I deleted the root launch.json and everything seems to be working.

vscode 1.23.1
rn tools 0.6.10

[code-matt]

This happened again to a co-worker today who was getting set up on a new system with 0.6.10 version of the extension. Creating the empty launch.json did not do the trick this time but when I had him add the the contents of my local copy and restart, option showed up!

[ruslan-bikkinin]

Hi @joebernard @code-matt
What extensions has been installed on machines on which you are experiencing this problem except React Native Tools?

[joebernard]

Angular Essentials 0.3.2
Angular Language Service 0.1.9
Angular v6 Snippets 6.1.1
Angular 2-inline
Auto Close Tag 0.5.6
Auto Complete Tag 0.0.2
Auto Rename Tag 0.0.15
Babel JavaScript 0.0.14
Color Highlight 2.3.0
Debugger for Chrome 4.4.3
Debugger for Java 0.9.0
DotENV 1.0.1
EditorConfig for VS Code 0.12.2
Git Blame 2.4.2
Java Extension Pack 0.3.0
Java Test Runner 0.6.1
Language Support for Java(TM) by Red Hat 0.25.0
Maven for Java 0.8.0
NativeScript 0.7.4
npm 0.3.4
npm Intellisense 1.3.0
Path Intellisense 1.4.2
Prettier - Code formatter 1.3.1
Rainbow Brackets 0.0.6
React Native Tools 0.6.10
TODO Highlight 0.5.12
TSLint 1.0.29
Winter is Coming Theme 0.6.2

[ruslan-bikkinin]

I still cannot reproduce this on our side even for clean VS Code installation. I am suspecting that the narrowed down activation events underlie this issue. Everyone who is experiencing this problem please try to do the following and report here whether it resolves this issue:

1. Close all VS Code instances.
2. Open ~/.vscode/extensions/vsmobile.vscode-react-native-0.6.10/package.json (or C:\Users\<username>\.vscode\extensions\vsmobile.vscode-react-native-0.6.10\package.json for Windows) in text editor, replace this lines

    "activationEvents": [
        "onDebug",
        "workspaceContains:**/node_modules/react-native/package.json",
        "onCommand:reactNative.runAndroidSimulator",
        "onCommand:reactNative.runAndroidDevice",
        "onCommand:reactNative.runIosSimulator",
        "onCommand:reactNative.runIosDevice",
        "onCommand:reactNative.startPackager",
        "onCommand:reactNative.startExponentPackager",
        "onCommand:reactNative.stopPackager",
        "onCommand:reactNative.restartPackager",
        "onCommand:reactNative.publishToExpHost",
        "onCommand:reactNative.showDevMenu",
        "onCommand:reactNative.reloadApp"
    ],

with

    "activationEvents": [
            "*"
    ],

and save.

1. Open VS Code and try to reproduce the issue.

[jcraven-worksight]

@ruslan-bikkinin Ran into this issue today. I've tried all the other recommended solutions in addition to your previous one and am still experiencing this.
environment:
VSCode: 1.24.0
RN extension: 0.6.10
Ubuntu 18.04
RN: 0.55.2
Node: 8.11.2

edit: I got it working by accessing the debug menu not through the gear icon in the left panel of VSCode but in the top bar debug menu -> Add Configuration option.

[ruslan-bikkinin]

Hi guys, did you try v0.6.11? We have fixed activation event handler which might be the cause of this issue.

[inturbidus]

@ruslan-bikkinin I followed the steps to update activation events above with extension 0.6.11 and React Native still doesn't show as an environment option.

VSCOde 1.24.1
RN 0.55.1
Mac OSX 10.13.13
Node 8.4.0

[inturbidus]

Adding a debug configuration for chrome, and then adding another configuration made a context menu popup inside of launch.json and it did have React Native Debug options there. But it would not show up in Select Environment menu.

[erichui2017]

i find vs will del .react folder where vs close.
vs 1.24.1
rn tools 0.6.11

[iTOYS]

Hi there,
I've faced this issue once, but after reinstall react-native-tools I can't reproduce it anymore.
Seems like it's some installation issue in vscode which we can't fix from our side.
Could you please manually delete extension from ~/.vscode/extensions and install again from marketplace. After that React Native should appear as an option for environments(if you don't have ./vscode/launch.json in your project).
Please let us know any results!

Thanks!

[iTOYS]

If you still faced this issue just reinstall the extension from marketplace.
Closing for now. Feel free to reopen if reinstall doesn't work for you!

Thanks!

[code-matt]

I have installed RN for many people in past few weeks, have not seen this issue again and used to all the time. Thanks!

[blackinitial]

i have this issue, i was add configuration but not show prompt to select react native evironment debug only launch.json with config launch program.

I was try to reinstall react native tools extension, and reopen vscode and add configuration. But still not show the promp to choose react native debug environment.

Finally i copied config debug from other project and work...

[ruslan-bikkinin]

@blackinitial propmt won't be shown if you already have created launch.json .

[blackinitial]

@ruslan-bikkinin before that i was delete .vscode folder, when i add config on option, vscode made and open launch.json only not show the prompt

[ruslan-bikkinin]

@blackinitial it seems to be a VS Code issue. What version of VS Code do you use?

[kelvin-otieno]

@max-mironov I created a blank launch.json and closed and reopened vscode and the option for React Native was there!

Restarting vscode and/or removing&installing the plugin was not doing it.

Thanks...this worked for me. Didn't even have to restart vscode after creating the blank launch.json file.

[sophin123]

For me, I created launch.json file inside .vscode folder and disable vscode and enable it back again and then after that its was showing react environment.