RealmJS TypeError: Cannot read property 'Realm' of undefined

Question

This is an issue I had with RealmJS while working on my React Native app. I spent over four days trying to debug what was going wrong (I had already built a significant portion of the app, thinking it would be patched out in a newer release). Hopefully this helps someone.

---

I am trying to debug my React Native application but cannot due to RealmJS. When I run my simulator or device (either iOS or Android), the app works perfectly fine. Turn on Remote Debug, however, and the app just hangs on launch. I get the following error along with a blank white screen:

TypeError: Cannot read property 'Realm' of undefined
   reactConsoleErrorHandler  @  ExceptionsManager.js:179
   n  @  backend.js:32
   reportException  @  ExceptionsManager.js:104
   handleException  @  ExceptionsManager.js:171
   handleError  @  setUpErrorHandling.js:24
   reportFatalError  @  error-guard.js:49
   guardedLoadModule  @  require.js:204
   metroRequire  @  require.js:128
   (anonymous)  @  index.js:118
   executeApplicationScript  @  RNDebuggerWorker.js:2
   (anonymous)  @  RNDebuggerWorker.js:2

I've tried reseting the cache (watchman, react-native, pods, etc.), cleaning the build folder, and even restarting my machine, but nothing seems to work. Installing Realm in a fresh project shows that it works just fine, but I don't want to have to redo my entire project. What am I doing wrong?

Setup (npx react-native info):

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 230.89 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.8 - ~/Projects/MyApp/node_modules/.bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6626763
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 14.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: ^4.13.0 => 4.13.0 
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.3 => 0.63.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Answer 1

I spent a lot of time trying to resolve this issue. After piecing my project back together bit-by-bit, I discovered the issue: babel-plugin-module-resolver.

In order to create custom path aliases (i.e. "@components/" -> "./src/components/") I had to install babel-plugin-module-resolver as a dev dependency.

The issue arose when I set up the plugin like so:

// babel.config.js
module.exports = {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: [
        [
            "module-resolver",
            {
                root: ["."],
                cwd: "packagejson",
                extensions: [
                    ".ts",
                    ".tsx",
                    ".js",
                    ".jsx",
                    ".ios.js",
                    ".android.js",
                    ".ios.ts",
                    ".android.ts",
                    ".ios.tsx",
                    ".android.tsx",
                ],
                alias: {
                    "@components": "./src/components",
                },
            },
        ],
    ],
};

The solution was to change the cwd from packagejson to babelrc.

// babel.config.js
module.exports = {
    presets: ["module:metro-react-native-babel-preset"],
    plugins: [
        [
            "module-resolver",
            {
                ...

                cwd: "babelrc", // <-- here

                ...

After that, I could run the debugger properly!

Note: At the time of this answer there is another error that appears with the debugger for Realm 10.0.1 and RN 0.63.3, but this is an actual bug as opposed to a user error.