How to resolve electron errors in vuejs vuetify application

Question

I'm having trouble getting Electron to work in my vuejs/vuetify application.

I'm not sure how to fix the following error.

Here are the versions of the tools I'm using:

vue --version = @vue/cli 5.0.4

node-v=v18.12.1

package.json "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14", "vuetify": "^2.6.0"

I created my application using these commands from the admin command line:

-vue creates testvue02

-cd testvue02

-vue add vuetify - I did a "npm runserve" and this did compile and show the defaults vue/vuetify webpage

-vue Add electron builder

-npm run electron:service

This is the console output:

> testvue02@0.1.0 electron:serve
> vue-cli-service electron:serve

INFO  Starting development server...

DONE  Compiled successfully in 12524ms   2:45:44 PM

App running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.68:8080/

Note that the development build is not optimized.
To create a production build, run npm run build.

-  Bundling main process...node:internal/crypto/hash:71
this[kHandle] = new _Hash(algorithm, xofLen);
              ^

Error: error:0308010C:digital envelope routines::unsupported
 at new Hash (node:internal/crypto/hash:71:19)
 at Object.createHash (node:crypto:133:10)
 at module.exports (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\util\createHash.js:135:53)
 at NormalModule._initBuildHash (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:417:16)
 at handleParseError (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:471:10)
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:503:5
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\webpack\lib\NormalModule.js:358:12
 at C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:373:3
 at iterateNormalLoaders (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
 at Array.<anonymous> (C:\Users\johndoe\source\repos\testvue02\node_modules\vue-cli-plugin-electron-builder\node_modules\loader-runner\lib\LoaderRunner.js:205:4) {
 opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.12.1

Answer 1

reason

NodeJs v18 fixes a security vulnerability in the SSL provider that resulted in breaking changes to the webpack v4 module. Reference: https://stackoverflow.com/a/73027407/20130767

A quick and dirty fix is ​​to downgrade to Node.js v16, but this exposes your build to security threats (explained in the reference above). I'll outline a better solution below that works with Node.js v18.

solution

I had the exact same problem and solved it by:

• Upgrade to webpack 5.0.0. Go into the package-lock.json file and change all versions of 4.x.x webpack to 5.0.0. (ctrl f and search for "webpack":"4 finds all version 4 of webpack)
• Remove node modules and reinstall using npm i
• Once completed, Electron will start, but you may get this error: "DeprecationWarning: Invalid 'main' field..." in your "background.js" package.json file. 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 the "background.js" file