[Realm with Electron Using React] **Module** **not found** Error

Hello, I’m running into issues integrating Realm into an Electron-React application.

I tried following this guide: https://www.mongodb.com/docs/realm/sdk/node/integrations/electron-cra/ but am running into several error messages when running the following lines of code:

// This line of code does not cause an error
import Realm from 'realm';

// This line of code causes the error
const realm = new Realm.App({id: `${app_id_here}`})

The complete error messages:

[0] **ERROR** in **./node_modules/bindings/bindings.js** **5:9-22**

[0] **Module** **not found** **:** **Error** **: Can't resolve 'fs' in '{path_to_project}/node_modules/bindings'**

[0]

[0] **ERROR** in **./node_modules/bindings/bindings.js** **6:9-24**

[0] **Module** **not found** **:** **Error** **: Can't resolve 'path' in '{path_to_project}/node_modules/bindings'**

[0]

[0] **BREAKING CHANGE** **: webpack < 5 used to include polyfills for node.js core modules by default.**

[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.

[0]

[0] If you want to include a polyfill, you need to:

[0] - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'

[0] - install 'path-browserify'

[0] If you don't want to include a polyfill, you can use an empty module like this:

[0] resolve.fallback: { "path": false }

[0]

[0] **ERROR** in **./node_modules/file-uri-to-path/index.js** **5:10-29**

[0] **Module** **not found** **:** **Error** **: Can't resolve 'path' in '{path_to_project}/node_modules/file-uri-to-path'**

[0]

[0] **BREAKING CHANGE** **: webpack < 5 used to include polyfills for node.js core modules by default.**

[0] This is no longer the case. Verify if you need this module and configure a polyfill for it.

[0]

[0] If you want to include a polyfill, you need to:

[0] - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'

[0] - install 'path-browserify'

[0] If you don't want to include a polyfill, you can use an empty module like this:

[0] resolve.fallback: { "path": false }

[0]

[0] webpack compiled with **3 errors** and **2 warnings**

Note that I do not receive an error when I run this code:

import * as Realm from 'realm-web';

const realm = new Realm.App({id: `${app_id_here}`})

I need this application to work offline-first, however, and so realm-web will not suit all of my needs.

For context, I run into these errors with Realm v.11.3.2 as well as the latest versions of React and Electron as well as the recommended versions in the guide (e.g. Electron v. 13.2.x).

Lastly, I have the following webPreferences for electron:

{
  nodeIntegration: true,
  contextIsolation: false
}

as well as the recommended craco.config.js settings from the guide.

Please advise!

I guess “create-react-app@4” was using webpack 4.x and now it is highly possibly you have “create-react-app@5” with webpack 5.x. The error you get complaints about “fs” and “path” modules of nodejs and the part I quoted tells they are not included by default in the app’s packaging.

The error message also suggests you a solution in later lines, with path-browserify. please first try that and see if the error goes away.

1 Like

Hey all, so I got it to work by doing the following.

In package.json, I have these scripts:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "electron-dev": "electron .",
    "electron": "wait-on tcp:3000 && electron .",
    "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\""
}

Of importance here is start—we use craco start instead of react-scripts start, which is the default.

My craco.config.js file now looks like this:

const nodeExternals = require("webpack-node-externals");
module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          "path": require.resolve("path-browserify"),
          "fs": false,
          "os": false
        }
      },
      target: "electron-renderer",
      externals: [
        nodeExternals({
          allowlist: [/webpack(\/.*)?/],
        }),
      ],
    },
  },
};

The fallback suggestion taken from @Yilmaz_Durmaz (thank you :pray:).

Combining realm and electron with React right now does not follow electron’s security recommendations—in particular, it doesn’t use ipcRenderer with Context Isolation. But unfortunately nodeIntegration: true and contextIsolation: false is the only way that works, but hopefully that will change in the near future.

Regardless, this was helpful—thanks!

1 Like