HotReload in vMain and disable nodeIntegration errors

[Valdir Rospirski]

Hello, I installed your template right now.
I had two difficulties, one is that it does not restart vMain if I change any files, just a hot reload in the renderer.

And another difficulty is that I deactivated "nodeIntegration" and activated "contextIsolation".
And on my renderer console it is giving the error.
Uncaught ReferenceError: require is not defined

I appreciate if you can help me

Obs *: I am Brazilian, I am using google translate, sorry for the typos.

[Mahesh Bandara Wijerathna]

Hi @rospirski,

it does not restart vMain if I change any files

Hot reloading is not enabled for the Main process simply because it never works properly. If you try other plugins that provide this feature you'll notice that it's pretty much useless. So I decided not to integrate something that rarely works. But might look more into that in the future.

Uncaught ReferenceError: require is not defined

That's because you have not defined what modules to bundle in. If you disable nodeIntegration you have to make sure that webpack bundles in all the dependencies used in your Renderer process. Just copy those dependency names from your package.json and add them to vRenderer > bundleIn. Like this.

vRenderer: {
  bundleIn: [
    'core-js',
    'vue',
    'vue-router',
    'vuex',
    'my-dependency-1',
    'my-dependency-2'
  ]
}

Post an update once you try it.

[Valdir Rospirski]

About the hotreload I didn't know it was a problem, it's not something that will disturb me, just a lack of custom.

About the problem with nodeIntegration I did a clean installation of vue3 cli, with vuex, vue router, vue store, css-sass, and just followed the vuelectron installation step.

The installation is completely clean, I just modified electorn-main.js, changing these lines

nodeIntegration: false,
contextIsolation: true,
enableRemoteModule: false,

I uploaded it to a github repository for you to see.

[Valdir Rospirski]

I forgot to post the repository.

https://github.com/rospirski/vuelectron-nodeIntegration

[Valdir Rospirski]

Hi @rospirski,

it does not restart vMain if I change any files

Hot reloading is not enabled for the Main process simply because it never works properly. If you try other plugins that provide this feature you'll notice that it's pretty much useless. So I decided not to integrate something that rarely works. But might look more into that in the future.

Uncaught ReferenceError: require is not defined

That's because you have not defined what modules to bundle in. If you disable nodeIntegration you have to make sure that webpack bundles in all the dependencies used in your Renderer process. Just copy those dependency names from your package.json and add them to vRenderer > bundleIn. Like this.

vRenderer: {
  bundleIn: [
    'core-js',
    'vue',
    'vue-router',
    'vuex',
    'my-dependency-1',
    'my-dependency-2'
  ]
}

Post an update once you try it.

I think I got a solution, but I hope you validate it.

In "vue.configs.js"

I changed the webpack target from "electron-renderer" to "web".
And now the require error has stopped.

[Mahesh Bandara Wijerathna]

@rospirski I thought about that. I also thought that you could completely remove the externals property if you're gonna avoid nodeIntegration. But it should work without changing the target. Your approach is totally fine since the Electron renderer works exactly like a browser page without node capabilities. I'll look more into this and push some updates to change this behavior. I'll be keeping this issue open for now.

[Valdir Rospirski]

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('api', {
    send: (channel, data) => {
        let validChannels = ['openUrl', 'minimize', 'close', 'openConfigs', 'startUpdateElectron', 'startUpdateClient', 'openClient', 'clientVerify']
        if (validChannels.includes(channel)) {
            ipcRenderer.send(channel, data)
        }
    },
    on: (channel, func) => {
        let validChannels = ['updateMessage', 'openExecError']
        if (validChannels.includes(channel)) {
            ipcRenderer.on(channel, (event, ...args) => func(...args))
        }
    },
})

I'm building a launcher for a game.
With update system.

In the preload I inject only the ipc dependencies I need, and filter the channels. I found this on the internet and that's what I'm using at the moment. Making the renderer part entirely web.