How to Fix Error: error:0308010c:digital envelope routines::unsupported

Error: error:0308010c:digital envelope routines::unsupported occurs when “you are not using the LTS (long-term support) version of Node.js or you are using react-script with a version of less than 5.”

Understanding the error

If you work with Node.js and command line interface solutions like Webpack, create-react-app, or vue-cli-service, you might have encountered the error, Error: error:0308010c:digital envelope routines::unsupported.

When Webpack tried to access the MD4 algorithm in the newer versions of Node.js, it encountered the error error:0308010c:digital envelope routines::unsupported due to the lack of support for MD4 in the bundled OpenSSL.

In Node.js versions 17 and above, they bundled OpenSSL 3, which default disabled the MD4 algorithm due to its vulnerabilities in cryptographic contexts.

Webpack, especially in versions before 5.61.0, relied on the MD4 algorithm to fast hashing filenames and modules.

How to Fix the error:0308010c:digital envelope routines::unsupported Error

Here are five ways to fix the Error: error:0308010c:digital envelope routines::unsupported:

1. Passing the –openssl-legacy-provider to Webpack or the CLI Tool
2. Using an LTS Version of Node.js
3. Upgrade React Script to Version 5
4. Upgrade the webpack version 5
5. Downgrade Node.js version to 16.0

Solution 1: Passing the –openssl-legacy-provider to Webpack or the CLI Tool

With Node.js 17.x, a new OpenSSL version was also introduced, deprecating the older default provider. This has led to the above error for many applications, especially those using older crypto libraries.

Webpack

If you are using Webpack, you can modify the start script in your package.json to pass the –openssl-legacy-provider flag:

"scripts": {
   "start": "NODE_OPTIONS=--openssl-legacy-provider webpack serve"
}

CLI Tool

If you’re directly running a script or application, you can use the following:

NODE_OPTIONS=--openssl-legacy-provider node your_script.js

Solution 2: Using an LTS Version of Node.js

Another approach to fix the error is using an LTS (Long Term Support) version of Node.js. LTS versions are more stable and generally have better support for older libraries and tools. You can easily use tools like n or nvm to switch between Node.js versions.

Example using nvm

nvm install 18.17.1

nvm use 18.17.1

Solution 3: Upgrade React Script to Version 5

If you are working with a React project bootstrapped with create-react-app, upgrading “react-scripts” (the underlying toolchain) might resolve the issue, as newer versions often come with fixes and support for newer Node.js versions.

To upgrade react-scripts:

npm install react-scripts@5

Or, if you’re using Yarn:

yarn add react-scripts@5

Manually Update react-scripts Version

Step 1: Change the react-scripts version in the package.json file.

Open package.json in your favorite text editor. Locate the react-scripts line in the dependencies section and change the version to 5.0.2.

"dependencies": {
  ...
  "react-scripts": "5.0.2",
  ...
}

Step 2: Delete node_modules

The node_modules folder contains all the dependencies your project uses. Since you’re making changes to your dependencies, removing this folder is a good idea to ensure a clean state.

rm -rf node_modules

Step 3: Delete package-lock.json or Yarn.lock

Depending on whether you use npm or Yarn, you’ll have either a package-lock.json or Yarn.lock file. This file ensures consistent installs of your dependencies. Since we’re changing the dependencies, we want to regenerate this file.

For npm users:

rm -rf package-lock.json

For yarn users:

rm -rf yarn.lock

Step 4: Install Dependencies

You’ll need to reinstall all your dependencies, generating a new lock file.

For npm users:

npm install

For yarn users:

yarn install

After following these steps, the project should be using react-scripts version 5.0.2. Always test the application after making such changes to verify everything works as expected.

Solution 4: Upgrading the webpack to version 5

The Error “error:0308010c:digital envelope routines::unsupported” is indeed fixed in Webpack version 5.61.0 by adding an MD4 implementation using Web Assembly, users facing this issue would benefit from upgrading to this version or later.

Update Webpack

For npm users

npm install webpack@5.61.0 --save-dev

For yarn users

yarn add webpack@5.61.0 --dev

Update Related Plugins and Loaders

It’s a good practice also to ensure that related plugins, loaders, and other dependencies (like webpack-dev-server, webpack-cli, etc.) are compatible with the updated Webpack version. Consider upgrading them as well.

Solution 5: Downgrade Node.js version to 16.0

If you have a complex application, upgrading Webpack to version 5 can be difficult.

Alternately, downgrade your Node.js to version 16 as you prepare a migration plan from version 4 to version 5. If you use nvm, you can run the following commands to install and use Node v16.

nvm install 16.0

Switch to Node.js 16.0:

nvm use 16.0

That’s it! Now, you can run any application and won’t face the error again.

Related posts

error:03000086:digital envelope routines::initialization

Krunal

Krunal Lathiya is a seasoned Computer Science expert with over eight years in the tech industry. He boasts deep knowledge in Data Science and Machine Learning. Versed in Python, JavaScript, PHP, R, and Golang. Skilled in frameworks like Angular and React and platforms such as Node.js. His expertise spans both front-end and back-end development. His proficiency in the Python language stands as a testament to his versatility and commitment to the craft.