search

realm / realm-js

Realm is a mobile database: an alternative to SQLite & key-value stores
https://realm.io
Apache License 2.0
5.8k stars 576 forks source link

React Native Crash on compilation - Unable to resolve module fs #5836

Closed designhunger closed 1 year ago

designhunger commented 1 year ago

How frequently does the bug occur?

Always

Description

I'm running a React Native app on Expo with Hermes. Local testing is done on an iOS device with Metro, running on Mac OS. Our app is live and we now wanted to add data sync via mongodb and also the Auth Services. Problem is, I can do absolutely nothing, because I always get compilation errors, if I call one of the realm functions.

I installed the package realm 11.9.0 via npx expo install. The following very basic code already leads to the error.

import Realm from "realm";
const realmApp = new Realm.App({id: "application-id-1234"});

The exact same error happens if I additionally install @realm/react 0.4.3:

import {useUser} from '@realm/react';
const user = useUser();

Attached you'll find all of my dependencies in the project:

  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@expo-google-fonts/inter": "^0.2.2",
    "@expo/config-plugins": "~6.0.0",
    "@expo/prebuild-config": "~6.0.0",
    "@expo/vector-icons": "^13.0.0",
    "@react-native-async-storage/async-storage": "~1.17.3",
    "@react-native-firebase/analytics": "^16.5.0",
    "@react-native-firebase/app": "~16.5.0",
    "@react-native-firebase/crashlytics": "^16.5.0",
    "@react-navigation/native": "^6.0.2",
    "@react-navigation/native-stack": "^6.1.0",
    "@react-navigation/stack": "^6.2.1",
    "@realm/react": "^0.4.3",
    "@types/react-native-snap-carousel": "^3.8.5",
    "apollo3-cache-persist": "^0.14.0",
    "axios": "^1.4.0",
    "bson": "^5.3.0",
    "date-fns": "^2.29.1",
    "deprecated-react-native-prop-types": "^2.3.0",
    "dotenv": "^16.0.0",
    "eas-cli": "^3.5.2",
    "expo": "~48.0.15",
    "expo-asset": "~8.9.1",
    "expo-av": "~13.2.1",
    "expo-build-properties": "~0.6.0",
    "expo-constants": "~14.2.1",
    "expo-dev-client": "~2.2.1",
    "expo-font": "~11.1.1",
    "expo-haptics": "~12.2.1",
    "expo-linear-gradient": "~12.1.2",
    "expo-linking": "~4.0.1",
    "expo-network": "~5.2.1",
    "expo-splash-screen": "~0.18.2",
    "expo-status-bar": "~1.4.4",
    "expo-updates": "~0.16.4",
    "expo-web-browser": "~12.1.1",
    "phosphor-react-native": "^1.1.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-dotenv": "^3.3.1",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-mmkv": "^2.5.1",
    "react-native-purchases": "^5.0.0-beta.6",
    "react-native-reanimated": "~2.14.4",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-safe-area-view": "^1.1.1",
    "react-native-screens": "~3.20.0",
    "react-native-select-dropdown": "^2.0.4",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-sound": "^0.11.2",
    "react-native-svg": "13.4.0",
    "react-native-swiper": "^1.6.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-web": "~0.18.7",
    "realm": "^11.9.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~18.0.27",
    "jest": "^29.2.1",
    "jest-expo": "^47.0.1",
    "patch-package": "^6.4.7",
    "react-devtools": "^4.27.1",
    "typescript": "^4.9.4"
  },

Would be great to get some advise on how to get this up and running. Thanks a lot!

Stacktrace & log output

iOS Bundling failed 7315ms
The package at "node_modules/electron/index.js" attempted to import the Node standard library module "fs".
It failed because the native React runtime does not include the Node standard library.
Learn more: https://docs.expo.dev/workflow/using-libraries/#using-third-party-libraries

Can you reproduce the bug?

Always

Reproduction Steps

No response

Version

11.9.0

What services are you using?

Both Atlas Device Sync and Atlas App Services

Are you using encryption?

No

Platform OS and version(s)

iOS

Build environment

Which debugger for React Native: ..

Cocoapods version

No response

kneth commented 1 year ago

I have created an empty npm project (npm init -y) and copied your dependencies and devDependencies to package.json. When executing npm i I can see that the package electron is installed.

Furthermore, I have analysed the dependency tree (npm list -a), and I can see that only react-devtools depends on electron. By removing react-devtools from your devDependencies, the electron package is not installed. It makes sense as react-devtools as it is a tool. Please read https://www.npmjs.com/package/react-devtools for details.

designhunger commented 1 year ago

Thanks @kneth - that makes total sense! Removing react-devtools also removed the error.

Of course I'm running directly into the next problem :D Of course I ran pod install, and also use the latest versions, as mentioned in some other issues here. Do you have any idea what might be the problem?

 ERROR  Error: Missing Realm constructor. Did you run "pod install"? Please see https://docs.mongodb.com/realm/sdk/react-native/install/ for troubleshooting, js engine: hermes
 ERROR  Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
designhunger commented 1 year ago

Problem solved. I had to completely cleanup the cache, delete the node_modules and install all over again. Also I created a new expo build. If anyone else gets the same error, just follow the following steps.

@kneth - thanks again! I'll close this issue now.

yarn cache clean
rm -rf node_modules
rm yarn.lock
yarn