Quasar v2 Electron Renderer process Issue

[Flint174]

Hello! I am trying to build an electron project and having issues using electron components in the renderer process.

1. create a basic project with npm init quasar (js or ts doesn't matter)
2. in renderer process try to import anything from the electron (for example, "import { ipcRenderer } from 'electron')

Output:
App • ERROR • Renderer in ./node_modules/electron/index.js

Module not found: Can't resolve imported dependency "fs"
Did you forget to install it? You can run: npm install --save fs

App • ERROR • Renderer in ./node_modules/electron/index.js

Module not found: Can't resolve imported dependency "path"
Did you forget to install it? You can run: npm install --save path

Can you help me?

[yzqdev]

In renderer process you can not use something like import { ipcRenderer } from 'electron'
use const { ipcRenderer } = require("electron"); instead .

[Flint174]

Why? It seems fine for me... Anyway const { ipcRenderer } = require("electron") has the same result.

Lack of 'path' dependency can be fixed with node-polyfill-webpack-plugin. It feels like a bad idea, but it works. Still "fs" dependency remains

[yzqdev]

I'm sorry. Last time I got the same error, I changed the import method and solved it. Maybe we have different errors.😂
Access to path and fs modules of render process is not recommended. Maybe use something like contextBridge is a better choice.

According to the official document. https://www.electronjs.org/docs/latest/tutorial/ipc

[Flint174]

The thing is, I do not use neither path nor fs modules, they are electron dependencies. More likely, it is a webpack config issue, but I can't figure out how to fix this

[ksshim86]

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

electron-main.js

ipcMain.handle('foo', (event, args) => {
  console.log(args)
})

electron-preload.js

foo() {
  ipcRenderer.invoke('foo')
},

vue

window.myWindowAPI.foo()

vue -> electron-preload.js -> electron-main.js