How to Fix the ERR_OSSL_EVP_UNSUPPORTED Error in a React JS Application

Intro:

If you've encountered the ERR_OSSL_EVP_UNSUPPORTED error while starting up your React JS application with the npm start command, you're not alone.
This error occurs when an application or module tries to use an algorithm or key size that is no longer allowed by default in OpenSSL 3.0, which is used by Node.js 17 and newer versions. In this article, I'll explain how to understand and fix this error.

Understanding the ERR_OSSL_EVP_UNSUPPORTED Error

The error stack trace may make your eyes glaze over, but don't fall asleep just yet! I've got a solution for you.
Here's an example of what your error stack trace might look like:

olabisi@Olabisi-MacBook-Pro ~ % npm start
Error: error:0308010C:digital envelope routines::unsupported at newHash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (C:\React\spring-boot-react-crud-app\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (C:\React\spring-boot-react-crud-app\node_modules\webpack\lib\NormalModule.js:417:16) at C:\React\spring-boot-react-crud-app\node_modules\webpack\lib\NormalModule.js:452:10 at C:\React\spring-boot-react-crud-app\node_modules\webpack\lib\NormalModule.js:323:13 at C:\React\spring-boot-react-crud-app\node_modules\loader-runner\lib\LoaderRunner.js:367:11 at C:\React\spring-boot-react-crud-app\node_modules\loader-runner\lib\LoaderRunner.js:233:18 at context.callback (C:\React\spring-boot-react-crud-app\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at C:\React\spring-boot-react-crud-app\node_modules\babel-loader\lib\index.js:59:103 { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code:'ERR_OSSL_EVP_UNSUPPORTED' }

The ERR_OSSL_EVP_UNSUPPORTED error occurs when an application or module tries to use an algorithm or key size that is no longer allowed by default in OpenSSL 3.0.
Node.js 17 update has stricter restrictions on the algorithms and key sizes allowed by default, causing this error to occur. Blah, blah, blah, technical stuff, right? Let's move on to the fun part!
This error has been mentioned in the release notes for Node.js 17, and it can cause your application to fail during startup and can be a real buzzkill.

On a Mac, the error can occur if your openssl points to LibreSSL instead of OpenSSL.

Resolving the ERR_OSSL_EVP_UNSUPPORTED Error on Node.js 17

After some research, I found a temporary workaround to fix the ERR_OSSL_EVP_UNSUPPORTED error. I had to revert to the legacy provider for OpenSSL.
Here's how to do it:

1. Open your application's package.json file located in the root directory.

2. Look for the following lines:

"start": "react-scripts start"
"build": "react-scripts build"

1. Replace these lines with the following:

"start": "react-scripts --openssl-legacy-provider start" "build":"react-scripts --openssl-legacy-provider build"

1. Save the package.json file.

2. Run the npm start command again on your application's root directory.

   Voila!

Resolving the ERR_OSSL_EVP_UNSUPPORTED Error on Mac running LibreSSL.

You'll need to install or update your OpenSSL version to resolve the issue.

1. Open your terminal and run the following command to install OpenSSL using Homebrew if you don't have OpenSSL installed:

brew install openssl
brew update openssl

1. Once the installation is complete, you now update the openssl path with this command.

echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> ~/.zsh_profile

• or this command if Your mac is on running on bash profile

echo 'export PATH="/usr/local/opt/openssl@1.1/bin:$PATH"' >> ~/.bash_profile

1. Verify that OpenSSL is being used:

openssl version -a

1. Restart your terminal.

2. Run the npm start command again on your application's root directory After following these steps, your React JS application should run without encountering the ERR_OSSL_EVP_UNSUPPORTED error.

Congratulations! Your React application should start up without the ERR_OSSL_EVP_UNSUPPORTED error, Easy-peasy, lemon squeezy.

Conclusion (Drumroll Please!)

I hope this article has saved you from the misery of the ERR_OSSL_EVP_UNSUPPORTED error. Remember, it's important to stay calm and carry on when encountering technical difficulties. And when in doubt, just add "legacy" to the command - that seems to be the solution to everything, right? Happy coding!