How to Fix error:0308010C:digital envelope routines::unsupported

The "error:0308010C:digital envelope routines::unsupported" occurs when you use Node.js of version 17+ and use OpenSSL v3.0 which has some major changes in its algorithm.

The error can be solved in the following ways.

  • Set the NODE_OPTIONS environment variable to --openssl-legacy-provider
  • Pass the --openssl-legacy-provider flag to Webpack
  • For Create React App applications, upgrade react-scripts to v5.0.0 or higher
  • Downgrade the installed node.js version to 16 or less

What causes error:0308010C:digital envelope routines::unsupported

The Node.js V17+ with OpenSSL 3.0 moved MD4 algorithms into OpenSSL 3.0’s legacy provider. A provider is a collection of algorithms that can be added to our application when it is required. A legacy provider contains algorithms that are unsafe security-wise and outdated. The legacy provider will not load by default.

Webpack uses some cryptographic methods based on the MD4 algorithm which is available in legacy providers for Node.js v17+ with OpenSSL 3.0. 

How to solve the error:0308010C:digital envelope routines::unsupported

There are some different ways to solve the error. Let us discuss them one by one.

Set the NODE_OPTIONS environment variable to --openssl-legacy-provider

To set the NODE_OPTIONS environment variable to --openssl-legacy-provider, open your terminal and run the below command.

# for macOS, Linux or Windows Git Bash
export NODE_OPTIONS=--openssl-legacy-provider

# for Windows CMD (Command Prompt)
set NODE_OPTIONS=--openssl-legacy-provider

# for Windows PowerShell
$env:NODE_OPTIONS="--openssl-legacy-provider"

# for Docker (in your Dockerfile)
ENV NODE_OPTIONS="--openssl-legacy-provider"

Pass the --openssl-legacy-provider flag to Webpack

If the above solution is not worked, you can try to pass the --openssl-legacy-provider flag to Webpack. In a React app, you can pass --openssl-legacy-provider to the start script like:

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

Again this is getting failed and the error is persisting, then go for the next method of solution.

For Create React App applications, upgrade react-scripts to v5.0.0 or higher

Check the installed version of react-scripts on your application in the package.json file. If the version is less than v5.0.0, then upgrade the version of react-scripts to v5.0.0 or higher

For migrating to V5.0.0 run the below command.

# For npm
npm install --save --save-exact [email protected]
# For yarn
yarn add --exact [email protected]

If you encounter errors after upgrading, you may want to reinstall your dependencies. For this delete your node_modules folder and package-lock.json. Then clean your npm cache using the below command.

npm cache clean --force

Then reinstall your dependencies by running npm install (or yarn).

npm install

For more details read the change log.

Downgrade the installed node.js version to 16 or less

Another solution for this error is to downgrade the installed node.js version to 16 or less. You can check the currently installed version of node.js by running the following command.

node -v

If you are running Node.js via nvm, then you can easily downgrade the node.js version by running the below command.

nvm install v16

For more about nvm, read it on github.

Conclusion

To solve the error:0308010C:digital envelope routines::unsupported, you have to enable the legacy provider for Node.js of version 17+ and use OpenSSL v3.0. For this set the NODE_OPTIONS environment variable to --openssl-legacy-provider or pass the --openssl-legacy-provider flag to webpack. Other solutions are upgrading react-scripts to a version greater than 5 or downgrading the installed node.js version to 16 or less.

Related Blogs

Cannot read property of undefined in JavaScript

Cannot read property of undefined in JavaScript

The TypeError: Cannot read property of undefined occurs when we try to read a property on an undefined variable or when we try to access a property on a DOM element that doesn't exist.

Greatest Common Divisor (GCD) in JavaScript

Find greatest common divisor (GCD) in JavaScript

Find the Greatest Common Divisor(GCD) of two numbers using the Euclidean algorithm in javascript. Calculate GCD for a given integer array.

ckeditor

How to Integrate Custom Build CKEditor5 with React

Explains how to create a custom build CKEditor5 and integrate with react with sample code.

pm2 cluster

Scaling Node.js Applications With PM2 Clusters

Learn cluster modules in node js, install and configure PM2 in production, and implement PM2 clusters using the PM2 ecosystem without any modification in the current application code.

call-stack-in-javascript

What is Call Stack in JavaScript

JavaScript Call Stack is a mechanism to keep track of multiple function calls and manage execution context. This article describes how the call stack works with examples.

Factory Design Pattern in JavaScript

Factory Design Pattern in JavaScript

Factory allows you to handle all the object creation in a centralized location which helps the code clean, concise, and maintainable. Understand deeply with examples.

event loop and callback queue

Event Loop and Callback Queue in JavaScript

The event loop keeps monitoring the call stack and callback queue for executing callback functions. Read more about web APIs, callback queue, microtask queue, event loops, and starvation.

Objects Are Not Valid as a React Child

React objects are not valid as a react child

The React error "Objects are not valid as a React child" occurs when we render an object or an array in our JSX code. We can't use JavaScript objects as a child in React.

Can't Perform a React State Update on an Unmounted Component

Can't Perform a React State Update on an Unmounted Component

React Warning “Can't perform a react state update on an unmounted component” is caused when we try to update the state after the component was unmounted. Explains how to fix it.