ReactJS Error with Webpack and Digital Envelope Routines

Code Help
1

Hello Replit!

I recently encountered an error while trying to start my development server with ReactJS and I’m not sure how to resolve it. The error seems to be related to the digital envelope routines and I’ve provided the error stack trace below:

Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/runner/ClickStream/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/home/runner/ClickStream/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/runner/ClickStream/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:417:16)
    at /home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:452:10
    at /home/runner/ClickStream/node_modules/webpack/lib/NormalModule.js:323:13
    at /home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/runner/ClickStream/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/runner/ClickStream/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'
}

My question (X): How can I resolve the digital envelope routines::unsupported error when starting my ReactJS development server?

What I tried (Y): I’ve attempted to re-install my node modules, ensured that I’m using compatible versions of packages, and even looked into the crypto library, but haven’t found a solution yet.

What I found out: I found out that this is an issue with the package.json file.

package.json Code Snippet:

{
  "name": "ClickStream",
  "version": "0.1.0",
  "author": "Dark25",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-toastify": "^6.0.8",
    "redux": "^4.2.1",
    "styled-components": "^5.1.1",
    "video.js": "^7.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "CI= react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Any help will be greatly appreciated!

2

Hello again Replit!

A quick update regarding the issue I was facing earlier with the digital envelope routines::unsupported error when trying to start my ReactJS development server. I’ve managed to fixed the problem, I am sharing the solution here to help anyone else who may get error this in the future.

The Problem: I kept getting an error related to the digital envelope routines while trying to run my ReactJS project.

Original Error Quote:

Solution: The root cause turned out to be related to some OpenSSL changes in Node.js. To fix this, I added --openssl-legacy-provider as an argument to the start script in my package.json. Here’s the newpackage.json that fixed the issue:

{
  "name": "ClickStream",
  "version": "0.1.0",
  "author": "Dark25",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.4.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-toastify": "^6.0.8",
    "redux": "^4.2.1",
    "styled-components": "^5.1.1",
    "video.js": "^7.8.3"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "CI= react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

The change is in the start script: "start": "react-scripts --openssl-legacy-provider start".

If you face a similar problem, try adjusting your start script to include the --openssl-legacy-provider flag. This approach worked for me and my development server is now up and running.

Here is the running version of my project if you’re curious:
https://clickstream.dark9015.repl.co
Happy Coding!

Blockquote

2 Likes
3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.