I'm having some trouble with vue-cli-electron-builder plugin. I'm trying to use the nodeIntegration as described into the documentations but setting it to true will not give me the ability to use ipcRenderer in my vue compnents. To try fixing the problem I've tried to follow the preload script way but also this without success. Since the copy webpack plugin will not copy the preload.js file when the npm run electron:serve command is running, I've copied the file manually inside the dist_electron folder but I get this error in console when the app is opened
electron/js2c/renderer_init.js:91 Unable to load preload script: /Users/me/Sites/electron-app-demo/desktop-app/dist_electron/preload.js (function (exports, require, module, __filename, __dirname, process, global, Buffer) { return function (exports, require, module, __filename, __dirname) { import { ipcRenderer } from 'electron'; ^^^^^^ SyntaxError: Cannot use import statement outside a module at new Script (vm.js:88:7) at createScript (vm.js:261:10) at Object.runInThisContext (vm.js:309:10) at wrapSafe (internal/modules/cjs/loader.js:1047:15) at Module._compile (internal/modules/cjs/loader.js:1108:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1173:10) at Module.load (internal/modules/cjs/loader.js:992:32) at Module._load (internal/modules/cjs/loader.js:885:14) at Function.f._load (electron/js2c/asar_bundle.js:5:12694) at Object.<anonymous> (electron/js2c/renderer_init.js:91:3099) Inside the preload.js file I have this code that is the same of the electron builder plugin documentation. The file is in the same folder of the background.js file
import { ipcRenderer } from 'electron'; window.ipcRenderer = ipcRenderer; And in my vue.config.js file I have this code. The file is placed outside the src folder
const copyPlugin = require('copy-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new copyPlugin([ { from: 'src/preload.js', to: 'dist_electron/preload.js' } ]) ] }, pluginOptions: { electronBuilder: { builderOptions: { //nodeIntegration: true, preload: 'src/preload.js' } } } } In my vue component I'm importing the ipcRenderer in this way if I use nodeIntegration import { ipcRenderer } from 'electron'; but without success or in this way if I try to use the preload script method window.ipcRenderer.send()
At the moment I have no idea of how to solve this issue and I'm unable to send messages between electron main process and vue. How I can fix this?
