Electron-vue: How to exclude electron imports from renderer process when building for web?

[emjimadhu]

I dont know whether this is basic question or something more.

So heres the things i have now,

*) A custom Title Menu component with minimize, Maximize and Close in my Renderer Process.
For this i had to import electron in my component. Everything is working perfectly when i build Desktop App. But my problem is when i build for web, the build failed with error saying "Can't resolve 'fs' in '/home/emjimadhu/Projects/sample_app/node_modules/electron'"

So what can i do to exclude electron imports when i compile for web?

Thank you.

[SimulatedGREG]

@emjimadhu

electron-vue provides a global variable to let you know if you are building for electron vs.web. You can reference process.env.IS_WEB to determine how your application logic should be handled.

Example in default src/renderer/main.js

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))

Other than this, there isn't any magical way for the build process to handle this logic for you. Hope this helps.

[CanRau]

have to comment as I encountered the same and what seems to work is this

/src/renderer/main.js

if (!process.env.IS_WEB) Vue.use(VUE_ELECTRON)

instead of if (!process.env.IS_WEB) Vue.use(require('vue-electron'))

/.electron-vue/webpack.renderer.config.js

  plugins: [
    /* add to plugins */
    new webpack.ProvidePlugin({
      VUE_ELECTRON: 'vue-electron'
    }),
    /* more plugins */
  ]

/.eslintrc.js

/* to suppress eslint no undefined variables error */
globals: {
    __static: true,
    VUE_ELECTRON: true
}

it seems to work so far, maybe this could be default in electron-vue (if others can confirm that it works properly) @SimulatedGREG ?

[emjimadhu]

@CanRau: using require like @SimulatedGREG stated works for me though.

[SimulatedGREG]

Either way will work, but I believe using the webpack.ProvidePlugin would be a little too magical for entry-level users. The provided IS_WEB environment variable solves the problem and is more flexable since it can be used for more than just VUE_ELECTRON.

[CanRau]

um, I had the proposed way already in place which produced the above mentioned error, the magic solved it for me ;)

so if it's usually working, of course stick with it..might be some changes I made (don't know exactly right now^^)