Resolving the "0308010C: Digital Envelope Routines::Unsupported" Error in Angular Apps with Node.js 17+
Published: 2023-12-19 21:28:30



Deploying Angular applications is typically a smooth process, but encountering errors like "0308010C: digital envelope routines::unsupported" can be a source of frustration. In this blog post, we'll delve into the causes of this error and provide comprehensive solutions to address it, ensuring a seamless deployment of your Angular app with Node.js 17+.

This is the whole error,
```plaintext
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 (/vercel/path0/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/vercel/path0/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/vercel/path0/node_modules/webpack/lib/NormalModule.js:471:10)
    at /vercel/path0/node_modules/webpack/lib/NormalModule.js:503:5
    at /vercel/path0/node_modules/webpack/lib/NormalModule.js:358:12
    at /vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/vercel/path0/node_modules/webpack/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/vercel/path0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /vercel/path0/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /vercel/path0/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
Node.js v18.12.1
```

### Causes of the "0308010C: Digital Envelope Routines::Unsupported" Error

The error message you're facing originates from changes introduced in Node.js 17 and OpenSSL3, affecting the initialization context of the md family, including md4. This discrepancy may lead to the manifestation of the "0308010C: Digital Envelope Routines::Unsupported" error.

Also, Refer to the [OpenSSL 3.0 upgrade guide](https://wiki.openssl.org/index.php/OpenSSL_3.0#Upgrading_to_OpenSSL_3.0_from_OpenSSL_1.0.2) for further insights.

### Solutions to Resolve the Error

#### Solution 1: Upgrade NPM Packages

To address the error, consider upgrading Node.js packages causing the issue to the latest version. Run the following commands in your terminal:

```bash
npm audit fix
```

or, if needed:

```bash
npm audit fix --force
```

This will automatically identify and fix packages using outdated OpenSSL versions. Be cautious with the `--force` option, as it may introduce breaking changes.

#### Solution 2: Update Webpack

Upgrade Webpack to version 5 (specifically v5.61.0) using the following commands:

```bash
npm i webpack@latest
```

or, for Yarn users:

```bash
yarn add webpack@latest
```

Alternatively, update your `webpack.config.js` with the provided code snippet.

```javascript
const path = require("path");
const crypto = require("crypto");
const crypto_orig_createHash = crypto.createHash;
crypto.createHash = algorithm => crypto_orig_createHash(algorithm == "md4" ? "sha256" : algorithm);

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "app.js",
    hashFunction: "sha256",
    path: path.resolve(__dirname, "dist")
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 9000
  },
  mode: "development"
};
```

## Recommended Solution: Use --openssl-legacy-provider Option

**Option 1. Set NODE_OPTIONS Environment Variable:**
   - *Unix-like (Linux, macOS, Git bash, etc.):*
     ```bash
     export NODE_OPTIONS=--openssl-legacy-provider
     ```
   - *Windows Command Prompt:*
     ```bash
     set NODE_OPTIONS=--openssl-legacy-provider
     ```
   - *PowerShell:*
     ```powershell
     $env:NODE_OPTIONS = "--openssl-legacy-provider"
     ```

   - Additionally, integrate these into scripts in your `package.json`:
     ```json
     "scripts": {
       "start": "export NODE_OPTIONS=--openssl-legacy-provider && ng serve" // use set instead of export in case of windows machine
     }
     ```

   - Alternatively, install `cross-env` globally (`npm install --global cross-env`) and use it in your scripts:
     ```json
     "scripts": {
       "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider && ng serve"
     }
     ```

 **Set SSL Legacy Option via NPM:(Best Solution)**
   - For a simpler approach through NPM, set the SSL legacy option in the `.npmrc` file.
     - Example for NodeJS v18 with npm v9:
       - Add or edit `.npmrc` file in your project folder and include the option:
         ```
         node-options="--openssl-legacy-provider"
         ```

   - Advantages:
     - This setting can be managed per project.
     - The `.npmrc` file in the project will serve as a reminder for necessary updates.
     - If the issue occurs in other projects on the server, the error will be addressed consistently.

## Conclusion

By following these solutions, you can overcome the "0308010C: digital envelope routines::unsupported" error and successfully deploy your Angular app with Node.js 17+. Ensure your Node.js version is LTS, upgrade relevant packages, and make necessary adjustments to your Webpack configuration. Happy coding!