36

I was building a simple React app using Tailwind. I used create-react-app and then installed tailwind. I have done this many times before.

In order to install Tailwind, I also had to install craco and change package.json "scripts" to use craco, like so:

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

However, this time, when I ran npm start, I got an error that I had never encountered before:

Error: error:0308010C:digital envelope routines::unsupported

So I searched on StackOverflow and someone suggested adding --openssl-legacy-provider to my "start" script like this:

"scripts": {
    "start": "craco --openssl-legacy-provider start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  }

And it's working now. But can somebody please explain to me what --openssl-legacy-provider actually is and how it works?

zahra zamani
  • 1,323
  • 10
  • 27
Meet Shah
  • 612
  • 1
  • 6
  • 13
  • 1
    See https://github.com/webpack/webpack/issues/14532#issuecomment-947807590 – CherryDT Nov 14 '21 at 10:45
  • But why did it happen this time only and not usually? Do I have to do the same for all my projects in future? – Meet Shah Nov 14 '21 at 10:47
  • 4
    _"But why did it happen this time only and not usually?"_ Because some module uses commands that aren't supported anymore. _"Do I have to do the same for all my projects in future?"_ Only when you use modules that use unsupported commands. I don't know why this commands aren't supported anymore and if it is related to security but using unsupported commands should be a red flag. – Thomas Sablik Nov 14 '21 at 11:29
  • 1
    Does this answer your question? [Error message "error:0308010C:digital envelope routines::unsupported"](https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported) – Michael Freidgeim Nov 10 '22 at 01:23

7 Answers7

5

Due to changes on Node.js v17, --openssl-legacy-provider was added for handling key size on OpenSSL v3. You somehow have installed the latest version of node.

  1. Restore your previous version of nodejs.
  2. Go and manually remove the node dependency(e.g. "node":17.4.3) from package.json and packagelock.json.
  3. Delete node_modules folder and use npm install to reinstall node_modules.
zahra zamani
  • 1,323
  • 10
  • 27
ninja_456
  • 101
  • 1
  • 3
  • 4
    is there a way to keep node v17+ and still run it? – FirmCiti Inc Aug 15 '22 at 15:33
  • 45
    Oh no! yet another "downgrade-to-solve-everything" answer... As a Java developer I LOVE Node.JS ... reminds me Java back to 90's. Dependency nightmare. Solution: keep yourself 10 versions behind. – Magno C Oct 07 '22 at 01:49
5

I have seen many answers regarding the OpenSSL issue that people encounter due to the changes on Node.js v17. Personally, I encountered the problem in a vue.js/electron application after switching to my new MacBook with M1 chip.
This GitHub issue lists multiple options that worked for different users. In my scenario, adjusting the script commands in the package.json file worked:

"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",

"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"

I've seen users replacing the export with a run command. Keep in mind that the syntax might differ on another Os. For example:

Set and set

The full issue with all possible answers.

Niklas
  • 1,142
  • 16
  • 33
3

I had this error in Nuxt 2.15 I fixed the error in the following way.

package.json edit

I had Ubuntu so this method worked for me

"scripts":{
    "dev":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
    "build":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
    "start":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
    "generate":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
  },

My partner had Windows but the above method didn't work on it, then this method worked

"scripts":{
    "dev":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
    "build":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
    "start":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
    "generate":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
  },

The most interesting thing was that it worked in other ways in Ubuntu and Windows

Akbarali
  • 688
  • 7
  • 16
  • 5
    `export SET NODE_OPTIONS=--openssl-legacy-provider` sets two different environment variables, `SET` and `NODE_OPTIONS`. These snippets look like cargo cult programming. Don't do this. – Thomas Sablik Jan 13 '23 at 12:20
1

I have found a solution in this GitHub issue and it works for my case.

For Node.js v17+, you need to put the openssl-legacy-provider flag after your command, for example:

  • From npm --openssl-legacy-provider start to npm start --openssl-legacy-provider start
  • From npm --openssl-legacy-provider build to npm start --openssl-legacy-provider build

... and so on.

  • 2
    @ThomasSablik Sorry for the inconvenience, this is the first time I post an answer here. Thanks for your advice! I have edited my answer. – Nguyen Tien Hung Oct 07 '22 at 10:44
1

Adding --openssl-legacy-provider in package.json sure works, but if you don't want to use the legacy SSL provider, you can upgrade your webpack- and react-scripts versions.

I had to first delete package_lock.json and node_modules/. Then I ran:

npm install --save-dev webpack@5.74.0 --legacy-peer-deps
npm install --save-dev react-scripts@5.0.1 --legacy-peer-deps
npm install --legacy-peer-deps

After this, I tested with:

npm start

I also had to fix a few other issues, but eventually got it working.

Edit: I eventually found out that updating react-scripts made "hot reloading" stop working in my project. My backend is a ASP.NET Core 3.1 project which uses a .NET Core 3.1 version of Microsoft.SpaProxy. This version of SpaProxy seems to be incompatible with the latest react-scripts version. I eventually reverted to an older react-scripts version and added --openssl-legacy-provider to the startup command in package.json (as have been suggested here already). Now hot reloading works again. The other option would be to move my backend project to .NET Core 5 (or higher) to make hot reloading work again with the latest react-scripts version.

robino16
  • 128
  • 6
  • I'm assuming these other issues were issues relating to polyfills. Would you happen to recall how you solved those and if there was an issue displaying images after doing so? – BasiliskHill Jan 18 '23 at 03:58
  • Hi, @BasiliskHill. I'm sorry, but my issues were not related to polyfills. I had to modify some files in the Semantic UI npm package. – robino16 Jan 19 '23 at 09:39
0

I faced the same issue with Angular, where I had following versions:

node -v   => v18.16.1
npm -v    => 9.5.1

The solution I figured out is to update the script in Package.json as follows:

  1. run: npm config set legacy-peer-deps true
  2. Update:"start": "ng serve" to "start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve"
-2

Me sirvio para node v18

(set NODE_OPTIONS=--openssl-legacy-provider) -and (npm run start)

ó

($env:NODE_OPTIONS = "--openssl-legacy-provider") -and (npm run start)

Suerte.

FerNanDo
  • 9
  • 1