Once a month Newsletter

* We will keep your email in safe place and will never misuse it. Unsubscribe in one click.

How to fix "error:0308010c:digital envelope routines::unsupported"

Quick fix

Struggling with the rand error in Webpack err_ossl_evp_unsupported? It's often due to using Node 17+ with legacy packages like Webpack 4.

Node 17+ employs OpenSSL 3.0, which strictly monitors hash algorithms and key sizes.

How to tackle this? There are several paths:

Use the openssl-legacy-provider flag to allow Node to disregard unsupported hash algorithms. (see below for more details)[#solution-node-flag]
Upgrade your packages - for example, switch from webpack 4 to webpack v5.54.0 or newer, same goes with babel < 8.2.0 and react-scripts < 5. (see below for more details)[#solution-update-packages]
If all else fails, revert to an LTS Node.js version like Node version 16.x. (see below for more details)[#solution-update-nodejs]

For those of you working with React, updating the react scripts CLI to version 5+ could be beneficial.

Fix #1: Use the openssl-legacy-provider flag

To quickly fix the error, you can use the NODE_OPTIONS environment variable to intercept the default OpenSSL provider. --openssl-legacy-provider parameter is supported in Node.js 17 and higher.

To check the version of Node.js, open the terminal and run the following command:

node -v
# v18.16.1

In this case v18.16.1 is the version of Node.js installed in your environment.

On Linux and MacOS, you can use the following command to fix the error:

export NODE_OPTIONS=--openssl-legacy-provider

On Windows command prompt use the following command:

set NODE_OPTIONS=--openssl-legacy-provider

On Windows PowerShell use the following command:

$env:NODE_OPTIONS = "--openssl-legacy-provider"

You could add this command to your .bashrc or .zshrc file to make it permanent. Or prepend it to the command it package.json file:

{
  "scripts": {
    "start": "NODE_OPTIONS=--openssl-legacy-provider node index.js",
    "test": "NODE_OPTIONS=--openssl-legacy-provider jest",
    "dev": "NODE_OPTIONS=--openssl-legacy-provider nodemon index.js"
  }
}

If you are running React application created with create-react-app consider using SET command to set the environment variable:

{
  "scripts": {
    "start": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts start",
    "build": "export SET NODE_OPTIONS=--openssl-legacy-provider && react-scripts build"
  }
}

It is also possible to pass option --openssl-legacy-provider directly to react-scripts command. It looks cleaner and more readable:

{
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build"
  }
}

To read about further step check proper solution down the page.

Fix #2: Update outdated NPM packages

However adding NODE_OPTIONS to the environment variables is not a sustainable solution. It is better to fix the problem in the code. To do this, you need to find the npm package that uses the old OpenSSL provider. This provider is incompatible with OpenSSL 3 and you should update it to the latest version. If the package is not updated, you can try to find an alternative package that uses the new OpenSSL provider.

So how to find that npm packages could cause the issue? First of all check your project for outdated node packages you currently have installed:

npm outdated

I was able to find the following packages that were using the old OpenSSL provider:

babel-loader: 8.2.2
react-scripts: < 5.0.2

To update those packages run the following command:

npm update babel-loader react-scripts

Or force update to the latest version through semantical versioning:

npm install babel-loader@latest react-scripts@latest

When you are debugging the issue to find the package that is causing the issue you should pay attention to the trace of the error. In my case the error was caused by the loader-utils package in GatsbyJS installation. But it could be different for you.

If you don't have enough experience with the lock files you could simply try to delete one yarn.lock or package-lock.json file and reinstall the packages:

rm yarn.lock # or package-lock.json
yarn install # or npm install

If you are experienced with the lock files you could try to find the cause of the problem and fix it. This is the example of the error trace I had:

failed Building development bundle - 13.828s
ERROR in ./src/styles/fonts/font-awesome/css/font-awesome.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/url-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at getHashDigest (/home/user/Repositories/gatsby-project/node_modules/loader-utils/lib/getHashDigest.js:46:34)
    at /home/user/Repositories/gatsby-project/node_modules/loader-utils/lib/interpolateName.js:113:11
    at String.replace (<anonymous>)
    at interpolateName (/home/user/Repositories/gatsby-project/node_modules/loader-utils/lib/interpolateName.js:110:8)
    at Object.loader (/home/user/Repositories/gatsby-project/node_modules/file-loader/dist/index.js:29:48)
    at Object.loader (/home/user/Repositories/gatsby-project/node_modules/url-loader/dist/index.js:127:19)
    at processResult (/home/user/Repositories/gatsby-project/node_modules/webpack/lib/NormalModule.js:764:19)
    at /home/user/Repositories/gatsby-project/node_modules/webpack/lib/NormalModule.js:866:5
    at /home/user/Repositories/gatsby-project/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/user/Repositories/gatsby-project/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at runSyncOrAsync (/home/user/Repositories/gatsby-project/node_modules/loader-runner/lib/LoaderRunner.js:156:3)
    at iterateNormalLoaders (/home/user/Repositories/gatsby-project/node_modules/loader-runner/lib/LoaderRunner.js:250:2)
    at /home/user/Repositories/gatsby-project/node_modules/loader-runner/lib/LoaderRunner.js:223:4
    at /home/user/Repositories/gatsby-project/node_modules/webpack/lib/NormalModule.js:840:15
    at eval (eval at create (/home/user/Repositories/gatsby-project/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:12:1)
    at runCallbacks (/home/user/Repositories/gatsby-project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:50:4)
    at /home/user/Repositories/gatsby-project/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:249:5
    at /home/user/Repositories/gatsby-project/node_modules/webpack/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
 @ ./gatsby-browser.js 4:0-67
 @ ./.cache/api-runner-browser-plugins.js 39:10-41
 @ ./.cache/api-runner-browser.js 3:16-55
 @ ./.cache/app.js 10:0-65 28:87-32:1 36:20-29 64:0-14 87:19-28 122:6-15 28:0-32:2

Let's unwind the error trace to find the package that may cause the issue: mini-css-extract-plugin -> url-loader -> loader-utils. The loader-utils package is using the old OpenSSL provider. To fix the issue you need to update the loader-utils package to the latest version. But if you already have the latest version of the package it could be that lock file (package-lock.json or yarn.lock) still links the old version as a subdependency.

[email protected]:
  version "1.6.2"
  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.6.2.tgz#83172b4fd812f8fc4a09d6f6d16f924f53990ca8"
  integrity sha512-WhDvO3SjGm40oV5y26GjMJYjd2UMqrLAGKy5YS2/3QKJy2F7jgynuHTir/tgUUOiNQu5saXHdc8reo7YuhhT4Q==
  dependencies:
    loader-utils "^2.0.0"
    schema-utils "^3.0.0"
    webpack-sources "^1.1.0"

loader-utils@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
  integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
  dependencies:
    big.js "^5.2.2"
    emojis-list "^3.0.0"
    json5 "^2.1.2"

loader-utils@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
  dependencies:
    big.js "^5.2.2"
    emojis-list "^3.0.0"
    json5 "^2.1.2"

url-loader@^4.1.1:
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz#28505e905cae158cf07c92ca622d7f237e70a4e2"
  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
  dependencies:
    loader-utils "^2.0.0"
    mime-types "^2.1.27"
    schema-utils "^3.0.0"

Both mini-css-extract-plugin and url-loader packages are using loader-utils package of version ^2.0.0. By my research I know that loader-utils was fixed the issue in version 2.0.4 and both packages should be resolved to use 2.0.4, because ^2.0.0 matches that. But the loader-utils@^2.0.0 entry surprisingly resolves with version 2.0.0. We should update loader-utils entries in yarn.lock (or package-lock.json) file and reinstalling the packages:

npm install

After the treatment versions of loader-utils package in yarn.lock (or package-lock.json) should be combined together:

loader-utils@^2.0.0, loader-utils@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
  dependencies:
    big.js "^5.2.2"
    emojis-list "^3.0.0"
    json5 "^2.1.2"

If you are using yarn you could replace that manual work by using yarn upgrade loader-utils@^2.0.0 command update lock entries for the package.

Updating Nodejs to LTS version

If the problem still exist you could try to update the Nodejs version on the project to the latest LTS version. Current LTS version are:

16.20.1 (Maintenence, upgrade to version 18 recomended)
18.16.1 (Active LTS)
20.4.0 (Current, Non-LTS, use in production only if you know what you are doing)

You can check LTS releases support status at the moment on the official website: https://nodejs.dev/en/about/releases/

Explanation

The error is caused by the fact that the default OpenSSL provider was changed in Node.js 16.13.0. The new provider is not compatible with the old one, and some libraries may not work correctly with it.

The NODE_OPTIONS environment variable allows you to switch to the old provider.
Updating packages have updated binaries with correct OpenSSL provider version links.
And downgrading Nodejs to LTS version will simply work with the old OpenSSL provider.