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.

[decpk]

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.

[decpk]

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",

2. vue.config.js

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

3. electron main.js

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

[alisonmoura]

As @MaviTm and @AndreiSoroka pointed out, doing those configurations worked for me.

In my case, I did:

On vue.config.js:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    },
  },
};

On background.js's createWindow function:

 const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      nodeIntegrationInWorker: true,
    },
  });

With that done, I could use the ipcRenderer as a module on a Vuejs SFC Component, as @nklayman sugested:

<script>
import { ipcRenderer } from "electron";

export default {
  name: "Home",
  methods: {
    start() {
      ipcRenderer.send("open", { msg: "Go!" });
    },
  },
};
</script>

And at last, but not least, as @and-ocean2017 said, should run the Electron Serve script, with npm run electron:serve or yarn electron:serve.

Thanks for the help guys :smile: !