4

How do I access the main electron process fs module from within a renderer side module like a vue component running within the Quasar framework.

I've tried a few variations in a component with the following error:

const { app } = require('electron')

vue-router.esm.js?8c4f:1897 TypeError: fs.existsSync is not a function

const { app } = window.require('electron')

TypeError: window.require is not a function

After looking at what I could find through my friend Google, I am still searching for an answer on how to access the electron main process functions from within a vue component running under the quasar framework. Anyone... anyone? I've seen some github examples of file explorers, but based on the electron documentation it seems the implementation of just simply calling something like fs.readdirSync() should be a lot simpler than what I'm seeing in those implementations.

sday
  • 1,041
  • 14
  • 22

3 Answers3

2

Your problem is explained in the Quasar docs

https://quasar.dev/quasar-cli/developing-electron-apps/node-integration

Quasar's suggestion is to use a preload script to attach the node APIs that you want in your renderer processes (ie: BrowserWindows) to the global window object.

https://quasar.dev/quasar-cli/developing-electron-apps/electron-preload-script

  1. Attach preload script to BrowserWindow (Main Process)

src-electron/electron-main.js:

import path from 'path'
win = new BrowserWindow({
  ...
  webPreferences: {
    preload: path.resolve(__dirname, 'electron-preload.js')
  }
})
  1. Attach Node APIs to window global (Preload Script)

src-electron/electron-preload.js:

window.electron = require('electron')
  1. Use Node API through the window global (Renderer Process)

somefile.vue

window.electron.ipcRenderer.sendSync(
   'message',
   payload
)
mattdedek
  • 2,525
  • 2
  • 17
  • 19
1

The answer was just beyond my understanding of how all these components are working together. Hopefully this will help someone else just coming up to speed on developing a Quasar/Vue/Electron app. If you launch your app/website using

quasar dev

you get a browser (renderer) that communicates with main electron process that cannot handle node main process stuff like: 

const electron = require('electron')
const fs = require('fs')

const files = fs.readdirSync('/')
console.log(files)
  • I couldn't find a clear, concise and simple way. It appears there is a webpack config that can provide the same 'deep' integration, but I was looking for a more out of the box solution.

If you launch your app 

quasar dev -m electron

You get deep integration and now can 'require()' or import the above modules within Vue components in your Quasar app.

sday
  • 1,041
  • 14
  • 22
  • When I build the ios app the same error pops up. Did you have problems with ios platform `TypeError: i.existsSync is not a function. (In 'i.existsSync(o)', 'i.existsSync' is undefined)` – 6by3 Nov 13 '19 at 11:56
-1
const electron = require('electron')
Alex
  • 1,373
  • 8
  • 15
  • The moment I include that line I get: TypeError: fs.existsSync is not a function – sday Mar 17 '19 at 16:33
  • Well, that's all I can say :( Nothing know about quasar and electron. But provided syntax of requiring of modules is correct, otherwise your examples :) – Alex Mar 17 '19 at 16:51
  • I'm familiar with standard implementation which is why I specifically asked this question in context with quasar, vue and electron where I'm having difficulty. Thanks – sday Mar 17 '19 at 17:42