Vue-cli-plugin-electron-builder: fs.existsSync is not a function

[ChunAllen]

Describe the bug
I'm getting fs.existsSync is not a function when I'm importing electron in my component.
This is similar to #335 but the solution is not working for me.

To Reproduce

import { remote } from 'electron';

const { app } = remote

export default {
  name: 'Home',
  methods: {
     restartApp() {
       app.relaunch();
       app.exit()l
     }  
  }
}

Expected behavior
I should be able to relaunch the app by accessing the methods in my component.

Screenshots

Environment (please complete the following information):

• OS and version: Mac OSX 10.14.5
• node version: 12.7.0
• npm version: 6.10.0
• yarn version (if used):
• vue-cli-plugin-electron-builder version : 1.2.0
• electron version: 6.0.10
• other vue plugins used:
• custom config for vcp-electron-builder:
• (if possible) link to your repo:

[nklayman]

It works fine for me with the same code. Can you please create a sample repository that reproduces the issue and share it with me?

[ChunAllen]

It's working already I tried adding this in background.js

 win = new BrowserWindow({ width: 1040, 
                            height: 1900, 
                            fullscreen: true,
                            webPreferences: { preload: __static + '/preload.js' } 
                          })

then the preload.js

const remote = require("electron").remote;

window.restartApp = function() {
    console.log('Restarting');
    remote.app.relaunch()
    remote.app.exit(0);
};

I can now call the restartApp() inside the method in Vue component.
But I think this is not an optimal solution because I'm adding the logic inside the public/

Any ideas how to make it more secured? or Why import { remote } from 'electron'; not being accessible in the first place.

[MaDetho]

got the same issue, any progress on this?

[nklayman]

Importing electron in a vue component works fine for me. Please create an example repo with the bug.

[bruceauyeung]

possibly related to this https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v2/docs/guide/configuration.md#node-integration
i encountered same issue, and fixed it through that guide.

[march1993]

possibly related to this https://github.com/nklayman/vue-cli-plugin-electron-builder/blob/v2/docs/guide/configuration.md#node-integration
i encountered same issue, and fixed it through that guide.

Thanks a lot! I've been struggling for days and days.

[march1993]

@nklayman
May I ask why setting nodeIntegration in background.ts alone is not taking effect?

 win = new BrowserWindow({
   webPreferences: {
      nodeIntegration: true
    }
  });

[nklayman]

@march1993 It also has to adjust the webpack config to allow for native modules.

[and-ocean2017]

I’m facing the same error i.e fs.existsSync is not a function. I’ve tried everything and doesn’t work for me. I’ve got this error while importing or requiring the electron in vue component. Please help.
@nklayman

//vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    },
  },
  css: {
    loaderOptions: {
      sass: {
        prependData: '@import "@/styles/_variables.scss"; ',
      },
    },
  },
};

// CreateNewNote.vue
<script>
const { ipcRenderer } = require('electron');
export default {
  methods: {
    createNote() {
       ipcRenderer.send('createNewNote', 'This text is from renderer to background');
};
</script>

Still I get the same error. What else I'll do to get rid of this error.

[nklayman]

@and-ocean2017 I don't think it will help, but try import { ipcRenderer } from 'electron instead of what you have currently. There is a chance it might fix it.

[and-ocean2017]

Thanks, @nklayman I was trying running the electron application in dev mode i.e in the browser using (npm run serve) and obviously browser doesn't find the electron API in dev server, that's why I was getting that error. Then I took a closer look and solved this to run my application as (npm run electron:serve) i.e Compiles and hot-reloads for development.
IF SOMEONE COULDN'T FIND THE SOLUTION TILL NOW SO TRY TO RUN APPLICATION USING (npm run electron:serve) or build using (npm run electron:build) .

[cookmscott]

It wasn't until I added nodeIntegration: true that my npm run serve broke. Does anyone know how to setup the project so you can run/build conditionally with the Electron API dependencies?

[MaviTm]

I had the same problem too, I made arrangements as below, it worked.

electron main.js

win = new BrowserWindow({
    width: 1360,
    height: 768,
    webPreferences: {
      nodeIntegration: true,
      nodeIntegrationInWorker: true
    }

vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
    //...
}

[AndreiSoroka]

for me helped:

1. package.json (up version, read more https://www.npmjs.com/package/electron-store)

"electron-store": "^6.0.1",

1. vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true, // <--- added
        }
    }
    //...
}

1. electron main.js

win = new BrowserWindow({
    width: 1360,
    height: 768,
    webPreferences: {
      enableRemoteModule: true, // <--- added
      nodeIntegration: true,
    }