Package path . is not exported from package

[MihirGrand]

How frequently does the bug occur?

Always

Description

Hi, I created a new Electron project using the Electron-React Boilerplate. Installed Realm using npm install realm and here's the code I used.

import Realm from 'realm';
//other stuff
  useEffect(() => {
    const realm = Realm.open({
      schema: [],
      path: 'data.realm',
    });
  }, []);

Stacktrace & log output

ERROR in ./node_modules/@realm/react/dist/index.js 1:0-26
Module not found: Error: Package path . is not exported from package C:\Users\mihir\...\node_modules\realm (see exports field in C:\Users\mihir\...\node_modules\realm\package.json)
 @ ./src/renderer/index.tsx 9:0-45 12:17-30

webpack compiled with 1 error

Can you reproduce the bug?

Always

Reproduction Steps

1. git clone —depth 1 —branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git realmtest
2. cd realmtest
3. npm install
4. npm i realm@latest --legacy-peer-deps
5. Replace code in src/renderer/App.tsx with the following (just importing realm and trying to create a new one)

import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import icon from '../../assets/icon.svg';
import './App.css';
import { useEffect } from 'react';
import Realm from 'realm';

function Hello() {
  useEffect(() => {
    const realm = new Realm({
      path: 'myrealm.realm',
    });
    console.log(realm.path);
  }, []);
  return (
    <div>
      <div className="Hello">
        <img width="200" alt="icon" src={icon} />
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

6. npm start

Output received is

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1212/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.124:1212/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\mihir\realmtest\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'

[electronmon] waiting for a change to restart it
17:49:37.435 > Skip checkForUpdates because application is not packed and dev update config is not forced
17:49:37.444 > checkForUpdatesAndNotify called, downloadPromise is null
<i> [webpack-dev-middleware] wait until bundle finished: /index.html
ERROR in ./src/renderer/App.tsx 8:0-26
Module not found: Error: Package path . is not exported from package C:\Users\mihir\realmtest\node_modules\realm (see exports field in C:\Users\mihir\realmtest\node_modules\realm\package.json)
 @ ./src/renderer/index.tsx 5:0-24 8:17-20

webpack compiled with 1 error
Not rewriting GET /index.html because the path includes a dot (.) character.
[26112:0703/174940.739:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[26112:0703/174940.739:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

Version

12.11.1

What services are you using?

Local Database only

Are you using encryption?

No

Platform OS and version(s)

Windows 11 23H2 Build 22631.3810

Build environment

No response

Cocoapods version

No response

[sync-by-unito]

➤ PM Bot commented:

Jira ticket: RJS-2856

[kraenhansen]

Reproduction Steps
Make an app using Electron-React Boilerplate or Electron-Vite, try installing and using realm in it.

Please provide the exact steps you're taking to reproduce this, making it simpler for us to reproduce. For one thing, I would love to learn if its the bundling of the main or renderer process (or both) that throw this error.

[MihirGrand]

@kraenhansen

1. git clone —depth 1 —branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git realmtest
2. cd realmtest
3. npm install
4. npm i realm@latest --legacy-peer-deps
5. Replace code in src/renderer/App.tsx with the following (just importing realm and trying to create a new one)

import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
import icon from '../../assets/icon.svg';
import './App.css';
import { useEffect } from 'react';
import Realm from 'realm';

function Hello() {
  useEffect(() => {
    const realm = new Realm({
      path: 'myrealm.realm',
    });
    console.log(realm.path);
  }, []);
  return (
    <div>
      <div className="Hello">
        <img width="200" alt="icon" src={icon} />
      </div>
    </div>
  );
}

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Hello />} />
      </Routes>
    </Router>
  );
}

6. npm start

Output received is

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:1212/
<i> [webpack-dev-server] On Your Network (IPv4): http://192.168.0.124:1212/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Users\mihir\realmtest\public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'

[electronmon] waiting for a change to restart it
17:49:37.435 > Skip checkForUpdates because application is not packed and dev update config is not forced
17:49:37.444 > checkForUpdatesAndNotify called, downloadPromise is null
<i> [webpack-dev-middleware] wait until bundle finished: /index.html
ERROR in ./src/renderer/App.tsx 8:0-26
Module not found: Error: Package path . is not exported from package C:\Users\mihir\realmtest\node_modules\realm (see exports field in C:\Users\mihir\realmtest\node_modules\realm\package.json)
 @ ./src/renderer/index.tsx 5:0-24 8:17-20

webpack compiled with 1 error
Not rewriting GET /index.html because the path includes a dot (.) character.
[26112:0703/174940.739:ERROR:CONSOLE(2)] "Electron sandboxed_renderer.bundle.js script failed to run", source: node:electron/js2c/sandbox_bundle (2)
[26112:0703/174940.739:ERROR:CONSOLE(2)] "TypeError: object null is not iterable (cannot read property Symbol(Symbol.iterator))", source: node:electron/js2c/sandbox_bundle (2)

[rossicler-hostalky]

@MihirGrand There are some problems with your usage.

1. realm is a native module, and all native modules should be installed under release/app when using electron-react-boilerplate.
2. Since realm is a native module, it should only be used in the main process, which is NodeJS. The renderer process is in a browser environment, which can't make usage of any native module directly. For that you will need to use the ipc communication between renderer/main process.

[MihirGrand]

@rossicler-hostalky Ohh I get it. I'll use it through the main process, thanks a lot!