Vscode-react-native: use realm debug run error ,react-native run-ios is ok

[zio-zhang]

Actual Behavior

1. create project ,use realm
   const Realm = require('realm');

2. launch.json "target": "iPad 2"
   3.debug iso
   4.display error
   [vscode-react-native] Debugging session started successfully.
   Missing Realm constructor - please ensure RealmReact framework is included!
   Module AppRegistry is not a registered callable module.
   Unhandled JS Exception: Missing Realm constructor - please ensure RealmReact framework is included!
   Unhandled JS Exception: Module AppRegistry is not a registered callable module.

   Expected Behavior

3. run not debug

4. 
   

   Software versions

• React-Native VS Code extension version: last
• VSCode version: 0.10.11
• OS platform and version:10.11.4

• React Native version: 0.22.2

  Outputs (Include if relevant)

• Output of the Debug Console (View -> Toogle Debug Console):
  [vscode-react-native] Debugging session started successfully.
  Skipping bundling for Simulator platform
  === BUILD TARGET houseTests OF PROJECT house WITH CONFIGURATION Debug ===
  Check dependencies
  * BUILD SUCCEEDED *
  Installing build/Build/Products/Debug-iphonesimulator/house.app
  Launching org.reactjs.native.example.house
  org.reactjs.native.example.house: 9769
  [vscode-react-native] Finished executing: react-native run-ios --simulator iPad 2
  [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
  [vscode-react-native] Debugging session started successfully.
  Missing Realm constructor - please ensure RealmReact framework is included!
  Module AppRegistry is not a registered callable module.
  Unhandled JS Exception: Missing Realm constructor - please ensure RealmReact framework is included!
  Unhandled JS Exception: Module AppRegistry is not a registered callable module.

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

  ### Packager is already running.

  [Warning] Debugging is not supported if the React Native Packager is not started within VS Code. If debugging fails, please kill other active React Native packager processes and retry.

  ### The Bundle Cache was prewarmed.

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):
  workbench.main.js:113 Cannot read property 'languageIds' of undefined: TypeError: Cannot read property 'languageIds' of undefined
  at file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:98:5560
  at Array.forEach (native)
  at file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:98:5037
  at Array.forEach (native)
  at e._handler (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:98:5009)
  at Object.listener (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:58:28803)
  at e._triggerPointListener (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:58:30786)
  at e.registerPlugins (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:58:31386)
  at t.$onPluginHostReady (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:71:21766)
  at t.e.handle (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:71:29651)e.onUnexpectedError @ workbench.main.js:113
  workbench.main.js:27 WARNING: Promise with no error callback:undefined
  workbench.main.js:27 TypeError: Cannot read property 'message' of undefined(…)
  index.html?config={"pathArguments"%3A[]%2C"programStart"%3A0%2C"workers"%3A-1%2C"enablePerformance"…:26 [uncaught exception]: TypeError: Cannot convert object to primitive valueonError @ index.html?config={"pathArguments"%3A[]%2C"programStart"%3A0%2C"workers"%3A-1%2C"enablePerformance"…:26
  index.html?config={"pathArguments"%3A[]%2C"programStart"%3A0%2C"workers"%3A-1%2C"enablePerformance"…:29 TypeError: Cannot convert object to primitive value
  at new Error (native)
  at Client.trackException (/Applications/Visual Studio Code.app/Contents/Resources/app/node_modules/applicationinsights/Library/Client.js:67:25)
  at e.logException (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:23:30848)
  at e.log (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:112:10791)
  at t.handleEvent (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:68:2959)
  at t.e.publicLog (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:68:144)
  at t.publicLog (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:68:5186)
  at t.e.flushErrorBuffer (file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:67:30198)
  at file:////Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/workbench.main.js:67:30058onError @ index.html?config={"pathArguments"%3A[]%2C"programStart"%3A0%2C"workers"%3A-1%2C"enablePerformance"…:29
  /Applications/Visual Studio Code.app/Contents/Resources/app/node_modules/applicationinsights/Librar…:67 Uncaught TypeError: Cannot convert object to primitive value

[MSLaguana]

This looks like it might be a configuration issue with your project. I am not familiar with realm, but did you follow instructions like https://realm.io/docs/react-native/latest/#getting-started ? You may be missing the native code for Realm if I understand the error correctly.

[zio-zhang]

project run ok in react-native run-iso
this error only show debug iso

[MSLaguana]

What happens if you manually react-native run-ios and then you enable debugging in chrome? Does that work correctly, or does it break in a similar way?

[MSLaguana]

You may need to close the project in VS code to make sure that we remove all of our debugging hooks and that it attempts to launch chrome.

[zio-zhang]

manually react-native run-ios and then you enable debugging in chrome ,no error ,is ok
only vscode debug ,debug iso

[MSLaguana]

Ok, we will have to look into this further. Thanks for reporting this.

[zio-zhang]

test more times ,use debug mode，add breakpoint, run debug ,sometimes show error;
when error ,reboot similator ,delete app,debug again
if run ok ,debug to be invalid，breakpoint not break;

[zio-zhang]

This trigger this error condition：
1、use realm
2、vscode debug , Successfully set up iso simulator environment debugging in Chrome

[zio-zhang]

use
react-native run-ios
debug in chrome
is ok ,no error

[MSLaguana]

I've looked into this a bit now, and it looks like Realm is not compatible with our extension, since they try to detect whether the app is being debugged, and the way we run things does not match what they expect. We'll have to work out how best to address this.

[appden]

@MSLaguana Please let us know how we can fix this in Realm. We'd be happy to make that fix, or you can send us a PR if you'd like.

[MSLaguana]

@appden: I can certainly point you to the incompatibility: If you look at https://github.com/realm/realm-js/blob/d62f78050ee61c67c0c60cdc83908b6c2a2eae81/lib/index.js#L27 then you'll see you check first for native support, then you check for a browser environment, and if both checks fail then you bail out.

When we debug react-native projects, we follow the same concept as debugging in chrome, except we use nodejs rather than a browser environment, which means that there won't be a navigator element, but since we are running on the host machine and not the device itself it also won't have the native-modified javascript environment. A better "am I running in a debug environment" check may be to look for __DEV__, which the packager sets to true in debug mode I believe. I'm not sure if that's always the case though.

I haven't looked deeper to see if your browser support also works in a nodejs environment. If it doesn't, then more work would be needed to support your functionality in a nodejs environment.

[alazier]

I just tried this out and this change isn't quite enough to get things working. Realm needs to be able to make synchronous http requests in order for the rpc layer to work in debug mode. We had to jump through a few hoops to make this work with react-native/chrome and we may need to do the same to get things working with this setup.

[eladgel]

any new about this? I really want to move to VS already

[appden]

@MSLaguana I think I figured out what we need to get this working. I tried using sync-request, but I need to require() it with the native Node require() function that VS Code exposes into the sandbox here. Unfortunately, the React Native code overrides that here. If you could also expose the same require() function as nativeRequire() then we could use that to gain access to the sync-request module and things should work from there. :smile:

[MSLaguana]

I've set up a PR that should provide this functionality. If you could try it out and see if it meets your needs, that'd be appreciated.

[MSLaguana]

I've merged the PR now, but I'll leave this issue open until the next version of the extension is published, and Realm has a fix on their end.

[eladgel]

anything new about this bug?

[MSLaguana]

We have just published a release of the extension which exposes the __debug__.require function, but Realm still needs to make use of that before it will work correctly, so I'll keep the issue open for now.

[alcat2008]

Is there any progress?

[MSLaguana]

That's a question for @appden

[axemclion]

@appden Pardon my naive question - Is there a reason you guys are doing a special case for VSCode and browser platforms ? Other native plugins (like camera) seem to work just fine. Is there more documentation about this that I can read up on ?

[appden]

This will be resolved by PR realm/realm-js#512. Thanks again for your help @MSLaguana!

@axemclion Debug mode for Realm requires we make synchronous HTTP requests to the application from wherever the JS is being debugged (normally Chrome, but Node in the case of VS Code). That is why we sprinkle in some special sauce to make this work. :smile:

[axemclion]

@appden Thanks. Btw, do you work at Realm ? I was planning to write something like a "Storage Explorer" for Realm with VSCode, and had some questions about collaboration.

[appden]

@axemclion I'm have been working on Realm for React Native, but I'm taking some time away for the next couple months, so I recommend you talk to @alazier, who is leading the project. Good luck!

[MSLaguana]

Closing since realm has updated and it works now.

[Dallas187]

Hi, I'm using the latest realm (v0.14.3) and visual studio (Version 1.5.2 (1.5.2)) and I still get the error on iOS simulator during debug: 'Missing Realm constructor - please ensure RealmReact framework is included!'

"dependencies": {
    "react": "^15.3.0",
    "react-native": "^0.32.0",
    "realm": "^0.14.3"
  }

cc: @MSLaguana @appden

[MSLaguana]

Looks like Realm still has the original check that caused this issue.

They have made use of the __debug__.require at https://github.com/realm/realm-js/blob/master/lib/browser/rpc.js but the file making the check https://github.com/realm/realm-js/blob/master/lib/index.js is still checking for a window variable which doesn't exist in node.

@appden, I had a look at https://github.com/realm/realm-js/commit/717d6781a185c214154ec422f836ce1a79363576 which claims to add support for vscode debugging, but I'm not sure how the window check is intended to work. We haven't changed anything relevant here to my knowledge.

[appden]

@MSLaguana You're absolutely right about window, but at the time I was successfully able to debug with VS Code, but that may have been relying on something else to inject the window alias. I'm not actively working on the project right now, but I'll cc those who are here: @alazier @fealebenpae

[Dallas187]

It would be good to get an idea of when this will be fixed. I was planning to use Realm in a project but this is making it impossible.
@alazier @fealebenpae

[MSLaguana]

For a temporary workaround, you could try global.window={} at the start of your index.<platform>.js file. I believe that will convince realm to operate correctly.

[Dallas187]

Unfortunately that doesn't work. But I like your thinking.

[Dallas187]

@alazier @fealebenpae - Any updates on this one?

[alazier]

We are working on a fix for this which should hopefully go into the next release.

[Dallas187]

Thanks @alazier . Is there an ETA?

[RoderickJDunn]

Hi @alazier , Is this supposed to be fixed now? I'm unable to debug on VSCode with realm on the latest version.

[arshbot]

@alazier any updates? Currently seeing this issue as of today