How to use realm on an electron app?

[D-or]

ERROR in ./~/realm/lib/browser/index.js

Module not found: Error: Can't resolve 'react-native' in
'/Users/H/Documents/MyApp/node_modules/realm/lib/browser'
 
@ ./~/realm/lib/browser/index.js 21:0-45

@ ./~/realm/lib/index.js
 
@ ./render/routes/tools/Network.js
 
@ ./render/router.js
 
@ ./render/index.js
 
@ multi (webpack)-dev-server/client?http://localhost:9527 webpack/hot/dev-server react-hot-loader/patch webpack-dev-server/client?http://localhost:9527/ webpack/hot/only-dev-server ./render/index.js

Not rewriting GET /dist/bundle.js because the path includes a dot (.) character.

I want to use realm on an electron app with Node 6, and I used the code below but it doesn't work and the error imformation is above.

const Realm = require('realm')
let realm = new Realm({
  schema: [
    {
      name: 'LogItem',
      properties: {
        time: 'date',
        percent: 'double'
      }
    }
  ]
})
realm.write(() => {
  realm.create('Log', {
    time: new Date(),
    percent: 90.00
  })
})

[blagoev]

Is this running with debugger attached? Can you share a simple prototype demonstrating this issue?

[D-or]

├── LICENSE
├── README.md
├── assets
│   └── locales
│       ├── en
│       └── zh
├── main
│   ├── index.js
│   ├── intl.js
│   └── platform.js
├── package.json
├── render
│   ├── component
│   ├── index.html
│   ├── index.js
│   ├── layout
│   │   ├── Index.js
│   ├── router.js
│   └── routes
│       └── tools
│           ├── test.js
├── webpack.base.js
└── webpack.render.dev.js

Yeah, and this is the file structure of my project, and I use realm in /render/routes/tools/test.js, which I also used in an react-native app and succeeded.

[D-or]

Does the error means that I need the module react-native? I have tried to install react-native, but it still doesn't work.😔

[blagoev]

@DoubleWoodH Can you share this project or similar one so I can debug the issue. It seems all should be fine for your project but I suspect it may be related to something like the development environment setup etc.

[martsie]

The first thing https://github.com/realm/realm-js/blob/master/lib/browser/index.js imports is from react-native, and it includes importing the debuggers from NativeModules which is not something you need for a non-rn app.

[blagoev]

@martsie indeed you are right. It seems we might be using this file in non RN context. I will investigate more and will update this issue.

[blagoev]

@DoubleWoodH

Does the error means that I need the module react-native? I have tried to install react-native, but it still doesn't work.😔

No it probably means we have a bug in the code. React Native should not be required in your scenario

[xhinking]

@DoubleWoodH Same problem here.

I guess it was because realm's getContext() method return a wrong context type when using Webpack to bundle js file which require/import realm. I try to set webpack target but not working here.

For now, you can require realm in the html as a global variable like this:

<script>
  var Realm = require('realm')
</script>

Note: This method doesn't work on webpack-dev-server, you can track this issue on webpack/webpack-dev-server#812.

[kraenhansen]

I found that I got this error when using Realm with webpack and bundling for the node target.
That lead me to this discussion webpack/webpack#839 and the webpack-node-externals module, which will make sure that webpack won't try to bundle the node_modules when they're required.

[Zhuinden]

#928 (comment) claims that Electron can work with Realm

[ghost]

Still getting
ERROR in ./node_modules/realm/lib/browser/index.js Module not found: Error: Can't resolve 'react-native' in '/Volumes/Others/Project/realm-exporter/node_modules/realm/lib/browser'.

Any updates?

[kraenhansen]

@risabhkumar-cc are you using WebPack? Or any other bundler? Do you have some code or details on your setup that you can share?

[kneth]

We do not support Electron. Realm Studio is an Electron app, and you are welcome to see how we are using Realm JS and Electron together.

[Nishchit14]

@kneth if you can add it in the readme or write a small blog on How to use realm with an Electron then It'll be a great help for the community.

[fuatsengul]

I see there's an incompatibility with webpack which I need to use it in my project in order to use hot reload functionality.

[elonzyy]

A quick workaround in webpack:
module: { rules: [ ... ] }, externals: [ 'realm' ],

[14zdog]

A quick workaround in webpack:
module: { rules: [ ... ] }, externals: [ 'realm' ],

i tried to modify the webpack.config.dev.js in react-scripts but could not get this work. Still the same. How can i exclude realm from webpack config of react-scripts module ?

[cahyowhy]

A quick workaround in webpack:
module: { rules: [ ... ] }, externals: [ 'realm' ],

this leads to realm is undefined on mine

[aslabs]

Same here.
I get:
ReferenceError: realm is not defined

[bentron2000]

Bumping this. Have tried a few of the suggestions here with no success. Has anyone successfully resolved:
Failed to compile.
./node_modules/realm/lib/browser/index.js
Module not found: Can't resolve 'react-native' in '/Users/b/myApp/node_modules/realm/lib/browser'
Surely even without officially supporting electron - the team could offer some pointers?
Thanking all in advance.

[kneth]

@bentron2000 It looks like you are getting the wrong context somehow (https://github.com/realm/realm-js/blob/master/lib/index.js#L111).

Are you by any chance debugging it inside VSCode (https://github.com/realm/realm-js/blob/master/lib/index.js#L31)? At least, it could explain it 😄

[bentron2000]

Thanks for your quick response @kneth :)

I think I am getting the wrong context - but I am not sure what config changes would be required to get the right one.

I have built an electron app based on create-react-app and I'm simply using import * as Realm from 'realm' and when I create a new Realm(... I get the warning about react-native.

I reviewed https://github.com/realm/realm-js/blob/master/lib/index.js#L31 and logged out the process object - it doesn't fit with what realm expects here. (I'm not using vsdebugger)
process: {"title":"browser","browser":true,"env":{},"argv":[],"version":"","versions":{}}

I assume this has something to do with my build process but I'm quite stuck on how to correct it.

Many of the examples I can find seem to import realm and work with it directly - including the large-virtualized-datagrid example on the realm github.

Thanks again for any help

B

[kneth]

@bentron2000 The best example I know is https://github.com/realm/realm-studio/

[bentron2000]

@kneth Thanks again for your prompt response.

As it turns out - my attempt to use create-react-app with electron and realm was a fools errand.
The build process for CRA is not compatible with the use of native node modules without ejecting and futzing around with millions of things.

For anyone else wishing to use electron/react/typescript/realm - the simplest way to get started is to use electron-forge and the react/typescript template, then add the realm npm package / import realm. Couldn't be simpler really.

npm install -g electron-forge
electron-forge init my-new-project --template=react-typescript
cd my-new-project
npm install realm

Hope this helps someone :)

B

[kraenhansen]

@bentron2000

Module not found: Can't resolve 'react-native' in

The reason you're seeing this issue is because create react app uses webpack internally. When bundling your app it follows all calls to require and tries to recursively include those in its bundle. Realm JS is not build to support being bundling and to prevent it from being bundled Realm Studio uses the webpack-node-externals package to exclude Realm (and all other node_modules) from the bundle https://github.com/realm/realm-studio/blob/master/configs/webpack.base.js#L17.

I'm glad you found a way around the issue by using electron-forge - but I wanted to shed some light on the underlying issue and why you're experiencing it.

[trickyc0d3r]

What a hell? Still no solution for this?! =(

[daviddkkim]

@kraenhansen
quick question,
It looks like the way you use webpack-node-externals in your code sample, it excludes all packages that aren't webpack related. Is it possible to let it include all BUT just Realm? I tried a negative look up regex but it didn't work :/

[moises717]

5 days of research with no results, and this works for me. using electron-forge set in webpack.main.config

externals: { 'react-native': 'react-native' },

[nguyen-tam]

@moises717

Here is my webpack.main.config and it still doesn't work. Is it correct?

module.exports = {
/**

• This is the main entry point for your application, it's the first file
• that runs in the main process.
  */
  entry: './src/main.js',
  // Put your normal webpack config below here
  module: {
  rules: require('./webpack.rules'),
  },
  externals: { 'react-native': 'react-native' },
  };