The ERR_OSSL_EVP_UNSUPPORTED error in a React JS application typically arises due to an underlying issue with the version of Node.js and OpenSSL being used. This error is commonly encountered when certain cryptographic algorithms or keys are not supported by the OpenSSL version bundled with the Node.js installation.

To temporarily fix this, Node.js 17 has a new option called –openssl-legacy-provider. This option lets you go back to using the old way of doing things until you can update your code to work with the new rules.

Error

ERR_OSSL_EVP_UNSUPPORTED

Methods to Fix ERR_OSSL_EVP_UNSUPPORTED

Update Package.json File

To temporarily solve this issue, you can use the old way of handling OpenSSL. Here’s what you need to do: Go to your app’s main folder and open the package.json file.

Look for these lines:

• Change “start”: “react-scripts start” to “start”: “react-scripts –openssl-legacy-provider start”
• Change “build”: “react-scripts build” to “build”: “react-scripts –openssl-legacy-provider build”

This change tells your app to use the legacy method for OpenSSL, which should help bypass the ERR_OSSL_EVP_UNSUPPORTED error until a more permanent solution is implemented.

Note: In your ReactJS Application , change the package.json file and add the above 2 lines of code in this file, below code snippet is shown below.

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "test": "react-scripts test",
    "eject": "react-scripts eject",
     "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider build"
  },

Update Node.js

First, ensure that you’re using a version of Node.js that includes the latest OpenSSL version. The error might be occurring due to a compatibility issue between Node.js and OpenSSL.

• Download and Install the Latest Node.js:
• Visit the Node.js official website.
• Download and install the latest stable version of Node.js.

Update Dependencies

Sometimes, the issue can be due to outdated packages that depend on older methods. In your react project update your project’s dependencies.

npm update

Modify Your Project Configuration

If you are using a build tool like webpack, you can modify the configuration to include the OpenSSL legacy provider.

For a webpack configuration:

// webpack.config.js
module.exports = {
  // your existing configuration
  resolve: {
    fallback: {
      crypto: require.resolve('crypto-browserify')
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_OPTIONS': JSON.stringify('--openssl-legacy-provider')
    })
  ]
};

Conclusion

To fix the ERR_OSSL_EVP_UNSUPPORTED error in a React JS application, start by updating Node.js and your project dependencies. If the issue persists, use the legacy OpenSSL providers by setting the NODE_OPTIONS environment variable. Modify your project’s build configuration if necessary, check for specific library issues, and as a last resort, consider downgrading Node.js. By following these steps, you should be able to resolve the error and ensure your React JS application runs smoothly.