1

I'm trying to use rxDB inside my electron vue app. I've followed the guide on how to implement it inside the renderer process, and I have the following code in my App.vue file:

// Importo dipendenze front-end
import { store } from '../src/store'
import { createRxDatabase } from 'rxdb'
import { getRxStorageIpcRenderer } from 'rxdb/plugins/electron'
import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie'

// Importo componenti 
import ProgressBar from './components/ProgressBar.vue'
import Navbar from './components/Navbar.vue'
import Main from './components/Main.vue'
import DocumentSelector from './components/DocumentSelector.vue'
import SelectionPreview from './components/PreviewSelection.vue'
//

export default {
    name: 'App',
    components: {
        ProgressBar,
        Navbar,
        Main,
        DocumentSelector,
        SelectionPreview,
    },
    data() {
        return {
            store: store,
            databaseUpdateCompleted: false,
            showSearchbar: false,       
        }
    },
    mounted() {
        this.initLocalDB()
        //window.ipcRenderer.send('startDatabaseUpdate')
        window.ipcRenderer.send('init')
        window.ipcRenderer.receive('suppliersData', (data) => {
            this.suppliersDataAvailable = true
            this.store.suppliers = data
        })
        window.ipcRenderer.receive('clientsData', (data) => {
            console.log(data)
            this.clientsDataAvailable = true
            this.store.clients = data
        })
    },
    methods: {
        async initLocalDB() {
            const ipcRenderer = window.ipcRenderer
            this.store.localDatabase = await createRxDatabase({
                name: 'datasetLocalReplica',
                storage: getRxStorageIpcRenderer({
                    key: 'local-dataset',
                    statics: getRxStorageDexie().statics,
                    ipcRenderer: ipcRenderer
                })
            })
            console.log(ipcRenderer, this.store.localDatabase)
        }
    }
}

Anyway I have the following problem when I run the npm run electron:serve command

-storage-ipc-renderer.ts:46 Uncaught (in promise) TypeError: settings.ipcRenderer.on is not a function
    at Object.messageChannelCreator (rx-storage-ipc-renderer.ts:46:1)
    at existingCacheItem.refCount (message-channel-cache.ts:50:1)
    at getFromMapOrCreate (utils-map.ts:20:1)
    at getMessageChannel (message-channel-cache.ts:41:1)
    at RxStorageRemote.createStorageInstance (rx-storage-remote.ts:83:1)
    at createRxDatabaseStorageInstance (rx-database.ts:533:1)
    at createRxDatabase (rx-database.ts:589:1)
    at Proxy.initLocalDB (App.vue:65:1)
    at Proxy.mounted (App.vue:49:1)
    at eval (runtime-core.esm-bundler.js:2675:1)

I'm using electron 24.3.0 with vue 3.2.13 and rxdb 14.11.4. Into the backgoudn.js file of electron app I'm doing this step to init rxdb and this is the same that is suggested from the documentation about this process:

import { app, protocol, BrowserWindow, ipcMain, dialog, Notification, Menu } from 'electron'
import { getRxStorageDexie } from 'rxdb/plugins/storage-dexie'
import { exposeIpcMainRxStorage } from 'rxdb/plugins/electron'

app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
        // Install Vue Devtools
        try {
            //await installExtension(VUEJS3_DEVTOOLS)
        } catch (e) {
            console.error('Vue Devtools failed to install:', e.toString())
        }
    }
    exposeIpcMainRxStorage({
        key: 'local-dataset',
        storage: getRxStorageDexie(),
        ipcMain: ipcMain
    })

    createWindow()
    initNotification()
})

Is there something wrong into the code?What's the correct way to use rxdb inside my electron app without problems?

ICTDEV
  • 227
  • 1
  • 10
  • The problem is seemingly unrelated to the code you've posted. Please read the error message you're getting carefully, it's important information. Once you're done debugging, please [edit] your question if you are unable to solve the problem yourself. – Alexander Leithner May 22 '23 at 13:59
  • @AlexanderLeithner the problem is internal, it seems that rxdb try to use the `ipcRenderer.on` function, that does not exist into the `ipcRenderer` that is passed to it. the only two methods that electron ipcRenderer expose are `receive` and `send`. – ICTDEV May 22 '23 at 15:37
  • Are you exposing `ipcRenderer` correctly? How are you initing your app? – tpikachu May 22 '23 at 16:56
  • Show me your `main.js` – tpikachu May 22 '23 at 16:56
  • @tpikachu if you look at the post, you will see that the background.js (main.js) code is already posted – ICTDEV May 23 '23 at 06:50
  • @tpikachu ipcRenderer is exposed into the preload.js file, and is binded to the window object so in my front end process I just pass the window.ipcRenderer – ICTDEV May 23 '23 at 06:51
  • If the problem is "internal", then you'll have to debug it yourself. I don't see any `settings.ipcRenderer.on` in the code you've posted and thus cannot comment on what the problem even *could* be. The error is in `-storage-ipc-renderer.ts`, so if you won't show the complete code, please make sure to read up on how to create a [mcve] so that we can reproduce the problem without your "internal" code. – Alexander Leithner May 23 '23 at 11:00
  • Well, you bind `ipcRenderer` to the window object but not to `settings` object. – tpikachu May 23 '23 at 12:01
  • as per documentation, there is no settings involved, so this is strange. – ICTDEV May 23 '23 at 15:15

0 Answers0