[Vuejs]-How to resolve electron error in vuejs vuetify app

by

1👍

Cause

NodeJs v18 closed a security hole in the SSL provider which caused breaking changes in your webpack v4 modules. Reference: https://stackoverflow.com/a/73027407/20130767

A quick and dirty fix is to downgrade to Node.js v16 but that opens your builds to security threats (explained in reference above). I’ll outline a better solution that works with Node.js v18 below.

Solution

I came across the exact same issue and solved it by:

  • Upgrading to webpack 5.0.0. Go into your package-lock.json file and change all version 4.x.x webpacks to 5.0.0. (ctrl f and search for "webpack": "4 to find all version 4 webpacks)
  • Delete node modules and reinstall using npm i
  • Once that’s done electron will launch but you may get this error: "DeprecationWarning: Invalid ‘main’ field in…" your package.json file of "background.js". Go ahead and delete the ‘main’ key and value from package.json. Then move "background.js" into your src folder. If you have a "preload.js" file, edit its path accordingly in your "background.js" file
👤Nathan

0👍

I had the same problem (not with Electron, though, and I am not seeing any Webpack in the repository that I am trying to run) but changing
vue-cli-service serve
to
set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
solved it for me (on Windows).

Found this possible solution here.

P.S. Note that it above mentioned link it is specified that it depends what is the operating system – if it is Ubuntu the set should be changed to export.

Hope this helps!

👤Deyan

Leave a comment