CODEWITHSUNDEEP
javascriptvue.jswebpackelectron
newbiedev
newbiedev

Reputation: 3586

SyntaxError: Cannot use import statement outside a module - vue electron builder plugin

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?

Upvotes: 1

Views: 1899

Answers (1)

MarkH
MarkH

Reputation: 702

I had the same issue - and it seems unfeasibly hard to find out how to resolve it... I went through very similar steps

The root issue is that preload.js isn't being bundled and is therefore missing. Copying it directly into the dist directory is clearly no great answer and as you've discovered doesn't work anyway (the reason for that is that you're copying an unprocessed file...)

Your vue.config.js is incorrect. Move the preload entry outside the builderOptions element. Like so ...

module.exports = {
    pluginOptions: {
        electronBuilder: {
            preload: 'src/preload.js',

as described here

Upvotes: 2

Related Questions