error:0308010C:digital envelope routines::unsupported [Fixed]

The “error:0308010C:digital envelope routines::unsupported” occurs when working with Node.js and command line interface solutions like  Webpack, create-react-app, or vue-cli-service. The bug persist because Node.js version 17 and later use OpenSSL v3.0 which has had breaking changes.

What Causes the “0308010c:digital envelope routines::unsupported” Error?

There could be many reasons for the occurrence of this bug but below are the 2 main reasons that might be the cause:

• You might be using the wrong LTS (long-term support) version of NODE JS. Node 17.0.0 will throw an error because it’s not an LTS version of Node.
• If your react-script version is less than 5 it will cause an error because it’s not compatible.

Error: error:0308010C:digital envelope routines::unsupported
Error: digital envelope routines::unsupported
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'

 It can be very frustrating when you encounter such an error without any knowledge of why it exists.

 But you’re not alone, I have been getting it too, and am going to show you how I fixed it.

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

A quick way to solve the error when running your development server is to set the ‘NODE_OPTIONS’ environment variable to ‘-- openssl-legacy-provider’.

If you’re on windows open the CMP (command prompt) or find and run the appropriate code below in your shell depending on your operating system.

# For those using macOS, Linux or Windows Git Bash
export NODE_OPTIONS=--openssl-legacy-provider

# ----------------------------------------------------

# 👇 For those using Windows CMD (Command Prompt)
set NODE_OPTIONS=--openssl-legacy-provider

# ----------------------------------------------------

# For those using Windows PowerShell
$env:NODE_OPTIONS="--openssl-legacy-provider"

# ----------------------------------------------------

# For those running Docker (in your Dockerfile)
ENV NODE_OPTIONS="--openssl-legacy-provider"

When using the latest version of Node.js, the ‘- - openssl-legacy-provider’ option is needed because Node.js version 17 and later versions uses OpenSSL 3.0 which has had some breaking changes.

Using ‘–openssl-legacy-provider’ flag will fix the “error:0308010C:digital envelope routines::unsupported”  error

When issuing the command in your package.json file, use the ‘ --openssl-legacy-provider’ flag

Below is an example of how you would want to do it with create-react-app.

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

All you have to do is to add ‘- - openssl-legacy-provider’ at the end of your command and you’re good to go. One other you would want to do if you still get an error that says “node: –openssl-legacy-provider is not allowed in NODE_OPTIONS” is to unset the ‘NODE_OPTIONS’ environment variable and then proceed and return the command.

# This is for those using macOS, Linux or Windows Git Bash
unset NODE_OPTIONS

# -----------------------------------------

# For those using Windows CMD (Command Prompt) only
set NODE_OPTIONS=

# -----------------------------------------

# 👇️ for Windows PowerShell users only
[Environment]::SetEnvironmentVariable('NODE_OPTIONS', '', 'User')
[Environment]::SetEnvironmentVariable('NODE_OPTIONS', '', 'Machine')

After hitting enter on the above commands and deleting the environemt, variables don’t forget to return your script.

Fix the error by making sure the ‘NODE_OPTIONS’ is set in the environment variable

If none of the above options work, then before you issue the command try and set the ‘NODE_OPTIONS’ right in the environment variables. But you have to be used to update the right command after the environment variable depending on your use case.

{
  "scripts": {
    "dev": "NODE_OPTIONS=--openssl-legacy-provider && next dev",
    "build": "NODE_OPTIONS=--openssl-legacy-provider && next build && next export",
  }
}

If you’re a Windows user, you might get an error that says “‘NODE_OPTIONS’ is not recognized as an internal or external command” after running the command. If that happens, the ‘cross-env’ needs to be installed before the error can be resolved.

So open your shell again and issue the below command:

npm install cross-env

After, you have to make sure to prefix the environment variable and command with ‘cross-env’.

{
  "scripts": {
    "dev": "cross-env NODE_OPTIONS=--openssl-legacy-provider && next dev",
    "build": "cross-env NODE_OPTIONS=--openssl-legacy-provider && next build && next export",
  }
}

If you’re wondering what we just did, then he’s a clue. Within the ‘package.json’ file, we prefixed the command with ‘NODE_OPTIONS=–openssl-legacy-provider’, an example. NODE_OPTIONS=--openssl-legacy-provider YOUR_COMMAND_HERE.

Here’s an example, if you’ve been developing Angular apps and you’re well experienced with its file structure. Then if this was supposed to be an Angular app, your ‘package.json’ script would have looked similar to the following below code.

{
  "scripts": {
    "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider && ng serve -o",
  }
}

If you did use create-react-app to initiate your project, then you have to update your react-scripts version because the package introduced some fixes regarding its Webpack config version 5.0.0.

For those who did use create-react-app, try updating your ‘react-scripts’ version

The first you have to do here is to try and check if you have an outdated version of react-scripts in your create-react-app project. If you have an outdated version then the error “error:0308010C:digital envelope routines::unsupported” will occur. In order to update it, open your terminal or command prompt and run the following command:

# 👇️ For those using npm
npm install react-scripts@latest

# 👇️ For those using yarn
yarn add react-scripts@latest

Run the app again and see if the error still persists. If so, then delete your node_modules and package-lock.json (note: not package.json) files. Then proceed and rerun the command npm install and restart your development server.

# For windows user, delete node_modules and package-lock.json 
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# For macOS or Linux, delete node_modules and package-lock.json 
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# Then clean npm cache packages
npm cache clean --force
# reinstall the deleted cache packages
npm install
npm install react-scripts@latest

Also, if you have been able to successfully update your ‘react-scripts’ version, then try and restart your development server (sometimes a fresh development server is all you need). But first, check your package.json file and make sure you’re running at least version ‘5.0.1’ of react-scripts. However, if you want a specific version, you can install it with the following command.

# For those using npm
npm install --save --save-exact react-scripts@5.0.1

# For those using yarn
yarn add --exact react-scripts@5.0.1

Now, if you have any issue in your ‘create-react-app’ project it will be fixed because the version of webpack in react-scripts version 5.0.0+ has been updated.

Change the start option script in your package.json file to react-scripts --openssl-legacy-provider start

// change this 
"start": "react-scripts start"
// to this 
"start": "react-scripts --openssl-legacy-provider start"

Conclusion

To sum up the main reason for getting the  “0308010c:digital envelope routines::unsupported” error, it might be because you’re using the wrong version of LTS of NODE JS, or possibly because you’re using react-scripts version less than 5.0. I have tried the fixes discussed above in many situations and it did work and I hope it will work for you. However, you’re free to try any other means if none works because your case might be different. Mostly, all you will need to use is to use the right LTS version of NODE JS and upgrade react-scripts to 5+. Or simply before running your development server, set the ‘NODE_OPTIONS’  environment variable to ‘- - openssl-legacy-provider’.

Thank you for reading.

Check also the following:

Solve – Objects are not valid as a React child error

Solve – Export ‘useHistory’ was not found in react-router-dom

sh: react-scripts: command not found after running npm start (Error Solved)

Importerror: cannot import name ‘force_text’ from django.utils.encoding