Realm throws in Electron forge installation due to react native package

[florianbepunkt]

How frequently does the bug occur?

All the time

Description

Using electron forge and realm, I get this error as soon as I use / import realm. The error is in react-native, but I don't understand why react-native is even installed, as I'm working on an electron app.

ERROR in ../../node_modules/react-native/index.js 14:7
Module parse failed: Unexpected token (14:7)
File was processed with these loaders:
 * ../../node_modules/@vercel/webpack-asset-relocator-loader/dist/index.js
You may need an additional loader to handle the result of these loaders.
| 
| // Components
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
 @ ../../node_modules/realm/lib/utils.js 146:29-52
 @ ../../node_modules/realm/lib/index.js 19:14-32
 @ ./src/db-test.ts 43:30-46
 @ ./src/layout/base-structure.tsx 27:16-37
 @ ./src/layout/index.ts 4:23-50
 @ ./src/app.tsx 22:15-34
 @ ./src/renderer.ts 31:0-16

Output of npm ls react-native

└─┬ @datev-konverter/client@1.0.0 -> ./packages/client
  └─┬ realm@10.8.0
    ├─┬ deprecated-react-native-listview@0.0.6
    │ └── react-native@0.65.1 deduped
    └─┬ react-native@0.65.1
      └─┬ @react-native-community/cli@6.0.1
        └── react-native@0.65.1 deduped

Stacktrace & log output

No response

Can you reproduce the bug?

Yes, always

Reproduction Steps

No response

Version

10.8.0

What SDK flavour are you using?

Local Database only

Are you using encryption?

No, not using encryption

Platform OS and version(s)

Mac OSX 11.6 M1/Arm arc

Build environment

Which debugger for React Native: ..

[bimusiek]

Hey, you have to use realm by window.require and not include it via normal import. The issue is when Realm is imported in standard way, any packager will try to pack it as a bundle. And it has to be native node module packaged in Electron app.

By using window.require you make sure it won't get packed in the bundle together with the rest of JS code. Additionally you can still import Realm from 'realm' for TypeScript typings. We have simple realm.ts file:

// @mh: Importing Realm here is only used by TypeScript for typing, webpack wont pick it as long as we don't return it as an object.
import Realm from 'realm';

// @mh: This trick is required for Node in Electron (window.require) and not to make renderer WebPack pack this package
// (if Realm is included in webpack it tries to pack React Native libs which breaks the functionality of Electron app)
// Server on main and server and realm worker all have implementations of window object with require function
const RealmWindow = window.require('realm') as typeof Realm;
export const realm = (): typeof Realm => {
  return RealmWindow;
};

// eslint-disable-next-line import/no-default-export
export default realm();

[kneth]

@florianbepunkt Can you use the work-around as described above?

[florianbepunkt]

@kneth Sorry, we decided against realm and for an indexdb infrastructure. Apologies for not closing this.