0

I'm having trouble getting electron to work in my vuejs/vuetify app.

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

Here are the versions of the tools I am 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 app with these commands from the admin command line:

-vue create testvue02

-cd testvue02

-vue add vuetify - I did a 'npm run serve' and this did compile and display the default vue/vuetify web page

-vue add electron-builder

-npm run electron:serve

Here 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
Jerry
  • 6,357
  • 8
  • 35
  • 50
  • had this issue installing old sass on latest node version, see https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported – Lawrence Cherone Dec 29 '22 at 20:12
  • Probably a NodeJS issue, which version are you on? Try v18 or 16. – kissu Dec 29 '22 at 20:32

2 Answers2

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
  • 36
  • 3
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
  • 19
  • 3