Unable to debug a React Native app that uses RealmJS

[mrbrentkelly]

Actual Behavior

I'm unable to debug inside of VS Code using the "Attach to Packager" configuration when I have a React Native project that includes RealmJS. As soon as the debugger attaches I run into errors.

Expected Behavior

Should be able to debug React Native app inside of Visual Studio Code.

Software versions

• React-Native VS Code extension version: 0.9.0
• VSCode version: 1.32.3
• OS platform and version: macOS Mojave 10.14.3
• NodeJS version: 8.15.1
• React Native version: 0.59.2
• Expo SDK version (include if relevant): N/A

Outputs (Include if relevant)

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

OS: darwin x64
Adapter node: v10.2.0 x64
vscode-chrome-debug-core: 6.7.40
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application
Debugger worker loaded runtime on port 10569
Require cycle: node_modules/realm/lib/browser/collections.js -> node_modules/realm/lib/browser/util.js -> node_modules/realm/lib/browser/collections.js
require.js:114
Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
Error: socket hang up
ExceptionsManager.js:82
Realm failed to connect to the embedded debug server inside the app. If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.
ExceptionsManager.js:74
Unable to find module for EventDispatcher
ExceptionsManager.js:82
Running application DebugRealm ({
RCTLog.js:47
    initialProps =     {
    };
    rootTag = 61;
})
Module AppRegistry is not a registered callable module (calling runApplication)
ExceptionsManager.js:74
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Realm failed to connect to the embedded debug server inside the app. If attempting to use Chrome debugging from a device, ensure the device is reachable on the same network as this machine.
ExceptionsManager.js:82
Unhandled JS Exception: Module AppRegistry is not a registered callable module (calling runApplication)
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host
ExceptionsManager.js:82
Must first create RPC session with a valid host
ExceptionsManager.js:74
Unhandled JS Exception: Must first create RPC session with a valid host

• launch.json

{
    "configurations": [
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }

    ]
}

• App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Realm from 'realm';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  constructor(props) {
    super(props);
    this.state = { realm: null };
  }

  componentWillMount() {
    Realm.open({
      schema: [{name: 'Dog', properties: {name: 'string'}}]
    }).then(realm => {
      realm.write(() => {
        realm.create('Dog', {name: 'Rex'});
      });
      this.setState({ realm });
    });
  }

  render() {
    const info = this.state.realm
    ? 'Number of dogs in this Realm: ' + this.state.realm.objects('Dog').length
    : 'Loading...';

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{info}</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,
  },
});

Before I Attach the debugger from VS Code

After I attach the debugger from VS Code

Steps to reproduce

Terminal

• react-native init ProjectName
• cd ProjectName
• yarn add realm
• react-native link realm
• react-native run-ios

iOS simulator (once app has loaded)

• cmd + d > Debug JS Remotely

Chrome

• Close debug window

VS Code

• Run Debug "Attach to packager"

iOS simulator

• Reload app so that the debugger attaches in VS Code

[mrbrentkelly]

This seems very similar to #363 which was a issue a couple of years ago. Pretty much identical error messages.

[SounD120]

Hi @mrbrentkelly , thanks for the detailed report. RealmJS not yet officially supports React Native 0.59. I have tested your sample on 0.58.5 and it worked without problems. You can use React Native 0.58 until RealmJS release new version with 0.59 support. I am closing this for now, feel free to reopen it in future if you still experience this on that version of RealmJS.