Electron-vue: It is recommended to update the dependent version

[CQBoyBrand]

It is recommended to update the dependent version,for example:electron

[zaherg]

You should do that as each version will fix something, but you will need to do that carefully.

My advice is to upgrade each package alone then test your code if everything went without any problem move to the next package, otherwise, keep the same version and move to the next package.

right now you will get "electron": "^2.0.4", out of the box, but the latest version which has a lot of fixes and improvements is "electron": "^5.0.1",.

[d0peCode]

@linuxjuggler what is most convenient way of updating electron and node version which are shipped with electron-vue?

[zaherg]

@BorysTyminski node is not shipped with electron-vue, so it's up to you how you upgrade node, for me I use nvm which works on both Linux and Mac.

For the modules, you can use npm outdated command which will list all the outdated modules that you need to install, so using npm install electron@latest for example, will upgrade electron to the latest version, but I advise you to test your code with each library update you perform.

---[update]---

After reading more I figured out that electron itself will shipped with nodejs.

[d0peCode]

@linuxjuggler that's weird about node because when I run node -v in terminal i get:

but when I open dev tools within electron window and call process.versions in console:

and because of that reason I'm not able to use worker within my electron project.

Maybe electron is shipped with own node and electron v2.0.17 has node v8.9.3.

[zaherg]

you should upgrade electron itself

$ npm i -D electron@latest
# Electron   5.0.2
# Node       12.0.0
# Chromium   73.0.3683.121

Version 2 of electron comes with source:

# Node       8.9.3
Major bumps to several important parts of Electron's toolchain, including Chrome 61, Node 8.9.3, V8 6.1.534.41, GTK+ 3 on Linux, updated spellchecker, and Squirrel.

[d0peCode]

I run this command npm install electron@latest and now basically my app is launching but not displaying anything and there are two errors in electron window devtools:

Uncaught ReferenceError: require is not defined at (index):1
Uncaught ReferenceError: module is not defined at renderer.js:1

but const Worker = require('worker_threads'); is finally not telling me that it can not find this module.

Also now process.versions in electron window devtools throw error:

Uncaught ReferenceError: process is not defined

---

I edited index.ejs previously to prevent

ReferenceError: process is not defined

see #871

---

I can just delete this require statement from index.ejs and then there is only this second error which point out to:

[zaherg]

try to use node 11 instead of node 12, I remember facing small issues when I updated to node 12 and that's why am stick with node 11 on my system

➜ node --version
v11.15.0

here are my dependencies :

  "devDependencies": {
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "babili-webpack-plugin": "^0.1.2",
    "bootstrap": "^4.0.0",
    "cfonts": "^2.4.3",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^5.0.3",
    "cross-env": "^5.1.6",
    "css-loader": "^2.1.1",
    "del": "^4.1.1",
    "devtron": "^1.4.0",
    "electron": "^5.0.1",
    "electron-builder": "^20.42.0",
    "electron-debug": "^2.2.0",
    "electron-devtools-installer": "^2.2.4",
    "electron-notarize": "^0.1.0",
    "eslint": "^5.16.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-vue": "^5.2.2",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "jquery": "^3.4.1",
    "mini-css-extract-plugin": "^0.6.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.12.0",
    "popper.js": "^1.15.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.23.1",
    "url-loader": "^1.0.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.32.1",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.4.1",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.1.3"
  }

as you can see am using electron 5.0.1 without any problem, my only problem now is the build/notarization

[zaherg]

Just updated to version 5.0.2 and it is working

[d0peCode]

I switched to node v11.15.0 it didn't help. Then I just copied your dependiecies and install them all (although I probably don't need half of them) also didn't help.

Now I will try to create fresh project with electron-vue and then update electron once again. If it will fail I'm going to add it to some repository and share link here. Stay tuned :-)

[d0peCode]

Okey so as I said I created fresh project with electron-vue:

vue init simulatedgreg/electron-vue electron-vue-issue

then I updated electron with

npm i -D electron@latest

then I double checked my node version:

node -v
v11.15.0

then I run project with

npm run dev

Result is that I have same errors in devtools of electron window as in my original project:

Uncaught ReferenceError: require is not defined at (index):1
Uncaught ReferenceError: module is not defined at renderer.js:1

and also this one

Uncaught ReferenceError: process is not defined at (index):1

which can be solved by removing few lines from index.ejs as seen in #871.

I've created demo repository on github. I would very appreciate and would be very thankful because it will help me a lot if you manage to spot the difference between your successfully working project and this issue demo project.

---

Firstly check if it's maybe work on your machine because I'm running this project on windows 10 and I see you are running on macOS.

[zaherg]

I tried your code, and it also failed, but I noticed something maybe the cause of the issue, and to be honest I don't have the full time now to test it, perhaps in the evening, I'll try to do more digging.

For some reason, in your new code the renderer process starts before the main process meanwhile in my code the main will compile before the renderer, not sure if this has any effect on the project or not.

[d0peCode]

This is so weird. It's hard to say that it's my code it's just this boilerplate with updated electron to latest version nothing more. But I found out that version 4.3.2 of electron is working just fine and have NodeJS version which allow me to create node-worker.

[zaherg]

@BorysTyminski I found the problem which cause the issue:

in your src/main/index.js file you will need to add the following to the BrowserWindow function:

    webPreferences: {
      nodeIntegration: true,
    }, 

nodeIntegration Boolean (optional) - Whether node integration is enabled. Default is false.

So the new code to create a new BrowserWindow is:

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
    },    
  })

Anyway, I advise you to read more about the option webPreferences at the documentation

[heronggen]

I have updated electron to latest version (v5.0.4) :

then I updated electron

npm i -D electron@latest

in your src/main/index.js file you will need to add the following to the BrowserWindow function:

webPreferences: {
  nodeIntegration: true,
},

then changed electron-builder version in your package.json
"electron-builder": "^20.41.0",

So the new you run yarn install again

[yyman001]

for the time at 2019-07-30, electron last verison 6.0, support upgrading to this version?

[zaherg]

@yyman001 yes it will work like a charm, you need to add app.setAppLogsPath(); before using app.getPath('logs')

other than that not much changed. (at least in my case)

[yyman001]

@linuxjuggler Does dependency cause problems ?
The default installation is 2.x version, I don't know if this version is too old, I don't know what will happen if I upgrade to the new version?
thanks you!

[zaherg]

@yyman001 upgrading from 2 to 6 is tricky but if you followed the instructions above you will get it done in no time (am talking about electron in specific here). For sure the other dependency needs a small amount of work to get upgraded so I advise you to try it in an empty/new project.

[MisterJD]

After an upgrade from electron version 5.0.8 to 6.0.2 no window is shown up anymore in dev mode (build is working like a charm). Is someone else facing this problem? #871 already applied.

[zaherg]

@MisterJD can you provide more information about the error messages you are getting?

[MisterJD]

@linuxjuggler unfortunately, there a none. everything seems fine. Electron processes running in the background, but no window is shown up (even no developer console). then I have to cancel the batch process manuelly per console. Same behaviour occur if I try the new boilerplate from #888. Already upgraded node.js to the latest version for testing, nothing changed. If I switch back to electron 5.0.9, dev command is working again. I am really missing a starting point here for digging in. I keep searching.

[zaherg]

try to upgrade to version 6.0.0 first, and be aware of this small change https://github.com/SimulatedGREG/electron-vue/issues/855#issuecomment-517864370 which may be the problem.

I didn't face any problem upgrade to 6.0.2 , so am wondering what is the cause in your case

[MisterJD]

mh, strange. https://github.com/SimulatedGREG/electron-vue/issues/855#issuecomment-517864370 already applied. okay, then it seems this is specfic to my dev environment. thanks for your help & effort @linuxjuggler . I have to search the error on my end.

[zaherg]

@MisterJD if you are on a mac you can check the Console.app and check if there are any logs there related to your app.

[f2rge]

@MisterJD (electron version 5.0.6 to 6.0.7) I have the same problem. It cannot be resolved. It works on OS X but not on Windows.

[MisterJD]

@f2rge Under Windows I have to delete the DevTools Extensions File in the folder C:\Users\%user%\AppData\Roaming\Electron everytime on startup. Don't ask me why, it seems it have something to do with the installation of the Vue extension.

[InsaneCake]

Ran into same issue as @MisterJD after updating electron from 2.0.x to 7.1.5 (latest at this moment) in clear project on Windows 10.
This solution combined with this works, so i commented installing vue-devtools in main/index.dev.js and i dont have to delete file every time (by cost of vue devtools, ofcourse)

but it works only in dev

this code in main/index.js:

console.log(app.isReady())
app.on('ready', () => {
  console.log(app.isReady())
  createWindow()
})

in dev run logs false, then true
but, if i run built (by build:dir) project from console, it only logs false
Seems like ready does not firing

Any thoughts?

[InsaneCake]

I found solution, that works for me and made a sample repo with updated electron (7.1.7)
In this commit all changes, that have been made compared to the new project

[sabifa]

I found solution, that works for me and made a sample repo with updated electron (7.1.7)
In this commit all changes, that have been made compared to the new project

After I tried to update my project to electron 7 which didn't work, I tried your sample repo. Unfortunately the electron app does not start at all, main process has no errors. Do I have to run a specific node version?
I'm currently on v11.15.0

Edit:
I managed to resolve this problem by deleting the cache folder of electron located at C:\Users\AppData\Roaming\Electron it starts flawlessly running Electron 7.1.7 now!

[InsaneCake]

I managed to resolve this problem by deleting the cache folder of electron located at C:\Users\AppData\Roaming\Electron it starts flawlessly running Electron 7.1.7 now!

Yes, you should keep an aye on this folder, especially on file "DevTools Extensions" in it.
I mention it in readme (not in clearest way):

if you need vue devtools extension, then uncomment strings 14 - 21 in src/main/index.dev.js, but then you have to delete "DevTools Extensions" file in C:\Users\%USER%\AppData\Roaming\Electron before every dev launch.

If you run another project with devtools installation enabled, this file will be created again and broke dev startup of updated project.
I will update repo readme later.

[hetz]

I get same problem, electron today release 8.0 https://www.electronjs.org/releases/stable .

[Brouilles]

Same @hetz

[underaft]

I'm having a lot of problems trying to upgrade stuff... Like electron 8 and some VUE packages that are also outdated... I think this repo needs a revision 😢