Error creating a local database

[Rostov4an1n]

I was trying to create a function for Vue that creates a local database file (I tried many different libraries). I came to the conclusion that only import is available in Vite, and require is not, but require is necessary to work with files. As a result, I tried to write a function that creates a database in the main.ts (Electron file), (Because require is available in it) which I then export and call via Vue. I tried without IPC, with IPC. I've tried a lot of ways. It all comes down to mistakes. Tell me the solution to my problem. I'm trying to make it work with sqlite3 (I downloaded nock, mock and other libraries necessary for its operation).

dex.js:4 Uncaught ReferenceError: __dirname is not defined at node_modules/electron/index.js (index.js:4:28) at __require (chunk-RSJERJUL.js?v=e7edd19a:3:50) at electron.js?v=0024cf4f:5:16

In general, it doesn't matter to me which library to use, the main thing is that it can create local databases as a file, and then take values from Vue and put them there. I am grateful in advance.

[Deluze]

__dirname is not defined is a typical error that occurs when trying to run code that's supposed to be only ran by NodeJS in a browser instance, as browser engines don't have these defined, so this probably means you configured your IPC incorrectly.

Can you show me how you setup your IPCs? You could even try to run some sqlite calls in the example IPC call this template comes with.

If you want to play around quickly, you can enable nodeIntegration on the Electron Window instance, but this is not recommended for security reasons.

[Rostov4an1n]

Hi! I tried to write a function that simply displays data from the visualization process in the terminal of the main process, namely the IDE. I decided to try to make at least something work before moving to the database.

Register.vue:

<script lang="ts">
import Header from './components/Header.vue';
import { defineComponent } from 'vue';
import { ipcRenderer } from 'electron';

export default defineComponent({
  components: {
    Header,
  },
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
    submitForm() {
      ipcRenderer.send('form-submission', {
        email: this.email,
        password: this.password,
      });
    },
  },
});
</script>

In main.ts I only added this:

ipcMain.on('form-submission', function (event, data) {
  console.log(`Email: ${data.email}`);
  console.log(`Password: ${data.password}`);
});

In preload.ts didn't change anything:

import {contextBridge, ipcRenderer} from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message:string) => ipcRenderer.send('message', message)
})

Error:

Uncaught ReferenceError: __dirname is not defined
    at node_modules/electron/index.js (index.js:4:28)
    at __require (chunk-RSJERJUL.js?v=74b31a42:3:50)
    at electron.js?v=74b31a42:5:16

[Rostov4an1n]

I somehow managed to make it work, now I'm going to think about the relationship, it's really difficult for me... I would like to know if I made it work with the right relationship, is it possible to facilitate it, and will it work with such methods to make the database work?

Register.vue:

<script lang="ts">
import Header from './components/Header.vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    Header,
  },
  data() {
    return {
      email: '',
      password: '',
    };
  },
  methods: {
  submitForm() {
    const email = this.email;
    const password = this.password;
    if (!email || !password) {
      console.log('Email and password fields are required');
      return;
    }
    window.electronAPI.submitForm(email, password);
  },
},
});
</script>

electron.d.ts:

/**
 * Should match main/preload.ts for typescript support in renderer
 */
export default interface ElectronApi {
  submitForm: (email: string, password: string) => void;
}

declare global {
  interface Window {
    electronAPI: ElectronApi,
  }
}

preload.ts:

import {contextBridge, ipcRenderer} from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  submitForm: (email: string, password: string) => ipcRenderer.send('form-submission', { email, password }),
});

main.ts (Electron):

ipcMain.on('form-submission', function (event, data) {
  console.log(`Email: ${data.email}`);
  console.log(`Password: ${data.password}`);
});

[Rostov4an1n]

I managed to implement the database SQlite3 via IPC (The original reason was that I didn't know that I needed to make changes to electron.d.ts, as well as define IPC in preload.ts)

Image

[Deluze]

Glad you were able to make it work :)

Your latest example is the recommended way of communicating between processes. See: https://www.electronjs.org/docs/latest/tutorial/tutorial-preload#communicating-between-processes