Error: error:0308010C:digital envelope routines::unsupported

Updated to latest VSCode 1.80.1 and installed official Ionic plugin v1.45.5 on Windows 11 Version 21H2 (OS Build 22000.795)

Clicking on Ionic icon showed project options to create a New Angular Project.

I selected my-first-app for the “Build Your First App” tutorial

This completed successfully. When building the following error and output were generated:

[Ionic] Building…

npx ionic build && npx cap copy
ng.cmd run app:build

  • Generating browser application bundles (phase: setup)…

Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015

Compiling @ionic/angular : es2015 as esm2015

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 BulkUpdateDecorator.hashFactory (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\util\createHash.js:145:18)
at BulkUpdateDecorator.update (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\util\createHash.js:46:50)
at RawSource.updateHash (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\node_modules\webpack-sources\lib\RawSource.js:77:8)
at NormalModule._initBuildHash (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\NormalModule.js:880:17)
at handleParseResult (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\NormalModule.js:946:10)
at d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\NormalModule.js:1040:4
at processResult (d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\NormalModule.js:755:11)
at d:\projects\ionic\prototypes\my-first-app\node_modules\webpack\lib\NormalModule.js:819:5 {
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
}

Node.js v18.12.1

[ERROR] An error occurred while running subprocess ng.

Googling a solution resulted in suggestion to downgrade Node.js to earlier LTS version or to add NODE_OPTIONS environment variable to:

NODE_OPTIONS=–openssl-legacy-provider

This does build successfully in CMD or bash shells but does not work in VSCode due to limitations of what values are allowed for NODE_OPTIONS environment variable.

So, while build does work outside of VSCode thls may be off-putting to new developers just trying out Ionic for the first time in VSCode.

Modifying the app template to work “out of the box” with latest versions of components may help adoption of IONIC.

Thanks,

1 Like

Note that this isn’t actually an Ionic issue but one from Webpack.

Hello it is a webpack issue, but do you have any solution ?

Newer versions of Node come with OpenSSL 3 that older versions of Webpack do not support. To avoid this you either need to downgrade Node or update your project dependencies. I don’t know what version of Angular you are on, but updating to Angular 17 should be sufficient.

Thanks for your reply @ldebeasi, my app uses Angular 12
“dependencies”: {
@angular/common”: “~12.1.1”,
@angular/core”: “~12.1.1”
I am afraid to modify this because I won’t know which version of what I would need then.

Angular has a great update guide at https://update.angular.io that you can follow.

1 Like

It is probably a some days of work to update right ?

I can’t answer that question for you because I don’t know anything about your application. However, the Angular upgrade process is (mostly) automated. I’d recommend starting with Angular 12 → Angular 13, evaluating how easy of an upgrade that was, and then proceeding from there.