create-react-app: Error:0308010C:digital envelope routines::unsupported

Describe the bug

I installed the latest Node version, currently, it’s 17.2.0. When I try to start the project in development mode with the command npm run start, it throws an error & it’s unable to start the project for development.

Pre-requisites:

Steps to reproduce:

  • run the command npx create-react-app hello-world
  • navigate to the project’s root & run the command: npm run start

Expected results

It was expected to compile in dev mode & launch React’s app in the browser like in the screenshot below: ( which it’s using Node’s version 16.13.1)

expected-result

Actual results

It doesn’t compile & it throws the following error instead:

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:471:10)
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:503:5
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:358:12
    at iterateNormalLoaders (C:\Users\manue\Desktop\projects\hello-world\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (C:\Users\manue\Desktop\projects\hello-world\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
C:\Users\manue\Desktop\projects\hello-world\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at Object.createHash (node:crypto:130:10)
    at module.exports (C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:417:16)
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:452:10
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\webpack\lib\NormalModule.js:323:13
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\Users\manue\Desktop\projects\hello-world\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\Users\manue\Desktop\projects\hello-world\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at C:\Users\manue\Desktop\projects\hello-world\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'
}

This is a screenshot of the issue:

actual-result

Workaround

  • uninstall Node’s version 17.2.0
  • install Node’s version 16.13.1
  • run npm run start

The app should compile now.

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 50
  • Comments: 35

Commits related to this issue

Most upvoted comments

Just as @TadRodgers and @Manuel-Suarez-Abascal mentioned: downgrading node is probably the best way to go. Did that and everything is working just fine now.

I used:

npm uninstall node to uninstall node npm install node@16.13.1 to install node at that specific version then source ./bash_profile to do some shell magic in order to register my current session with the current installation.

+17
Emekaony on Jan 21, 2022

While you wait for a new CRA version, you can run Node version 16 without uninstalling version 17 using nvm

nvm install 16.13.0 nvm run 16.13.0

Have a look at creating a .nvmrc file in your projects root. https://github.com/nvm-sh/nvm#nvmrc

I assume the issue is CRA using webpack-v4 and is resolved upgrading to v5 ( I haven’t actually validated this ) (#14532) #11563 #11562

+15
nicholasrobertson on Dec 5, 2021

cd into your newly created app directory run the following Run: npm install -g npm-check-updates

Then: ncu -u

Then: npm install

Then: npm start

+10
Tonya713MS on Oct 5, 2022

I’m having the same issue within CentOs Stream Version 9: node: v17.3.0 npm: 8.3.0

My work around was to down-grade Node:

$ npm install -g n $ n 16.13.1

$ nvm install 16.13.1 $ nvm use 16.13.1

Then I was able to continue with the build process.

+10
TadRodgers on Jan 13, 2022

I got this error while importing svg (import logo from './logo.svg';). running npm update loader-utils solved it.

+8
ghost on Mar 10, 2022

Updating loader-utils from 2.0.0 to 2.0.1 or above in yarn.lock worked for me.

loader-utils added support for Node.js 17 in https://github.com/webpack/loader-utils/pull/193

+6
KonstantinLukaschenko on Nov 6, 2022

Just for anyone finding this; it’s not exclusively a v17.x issue, but depends on the system openssl version. For example I hit this on Fedora 36 with the packaged version of nodejs (16.14.0) – this doesn’t have the --openssl-legacy-provider tag. I ended up installing an alternative version with nvm --install lts

+5
ianw on Aug 18, 2022

cd into your newly created app directory run the following Run: npm install -g npm-check-updates

Then: ncu -u

Then: npm install

Then: npm start

This one works perfectly well!

+4
rhiskey on May 3, 2023

I am struggling with this too… - node v19.3.0 - npm v9.2.0 - yarn v1.22.17

I tried to run my @React app and got Error:0308010C:digital envelope routines::unsupported. I’ve spent a few hours searching around and can’t find a solid answer to the problem. Is there any other solution without downgrading node version…? Thanks…!!

+4
naz-i-ya on Jan 9, 2023

I got this error while importing svg (import logo from './logo.svg';). running npm update loader-utils solved it.

It`s worked for me

+3
mrfourking on Jan 12, 2023

Lol installing 16.13.1 and then reinstalling node_modules results in:

Internal Error: Unable to deserialize cloned data due to invalid or unsupported version.
    at Object.deserialize (node:v8:344:7)
    at Ke.restoreInstallState (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:447:965)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async LC.execute (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:561:1879)
    at async LC.validateAndExecute (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:337:620)
    at async oo.run (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:351:1846)
    at async oo.runExit (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:351:2013)
    at async i (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:448:12377)
    at async r (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:448:10617)

On the other hand, adding the --openssl-legacy-provider flag adds more errors. Now I’ve reinstalled my latest node so at least I’m done to one error and broken hot reloading, and instead I’m up to 52 errors, broken everything and can’t work.

Adding the --openssl-legacy-provider worked for me.

Steps to resolve the issue using --openssl-legacy-provider :

  • update your start script in package.json to use react-scripts --openssl-legacy-provider start

It should look like this : "start": "react-scripts --openssl-legacy-provider start",

+3
whyprax on Nov 4, 2022

While you wait for a new CRA version, you can run Node version 16 without uninstalling version 17 using nvm

nvm install 16.13.0 nvm run 16.13.0

Have a look at creating a .nvmrc file in your projects root. https://github.com/nvm-sh/nvm#nvmrc

I assume the issue is CRA using webpack-v4 and is resolved upgrading to v5 ( I haven’t actually validated this ) (#14532) #11563 #11562

workaround is not what I am looking for rn 😦

+3
rhythmshandlya on Jan 29, 2022

I am having the same issue with Windows 10 21H1 (19048.1348), WSL 2 (Ubuntu 20.04.3 LTS) and Node 17.0.1.

We have two three workarounds:

  1. Use --openssl-legacy-provider argument in start script in package.json, but it is not recommended!
  2. Downgrade Node to latest v16 like was mentioned in issue
  3. Wait for CRA v5 or try CRA@next tag
+3
Kurzdor on Dec 3, 2021

Running react build also triggers this problem. The only workaround right now is to use Node 16.x

+2
jmgtan on Jan 17, 2022

Hello, if this can help future people encountering this issue. The problem seems to be at loader-utils library level and this was patched on version 2.0.1

Here is the fix: https://github.com/webpack/loader-utils/pull/193

On my project I specified a resolution for this dependency and it’s working perfectly without the need for specifying Node’s NODE_OPTIONS=--openssl-legacy-provider option.

Extract from package.json:

{
  "name": "My project",
  "version": "1.0.0",
  "dependencies": {
    "react-scripts": "^5.0.1",
    ...
  },
+  "resolutions": {
+    "loader-utils": "^2.0.1"
+  }
}
+1
baptooo on Dec 7, 2023

Lol installing 16.13.1 and then reinstalling node_modules results in:

Internal Error: Unable to deserialize cloned data due to invalid or unsupported version.
    at Object.deserialize (node:v8:344:7)
    at Ke.restoreInstallState (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:447:965)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async LC.execute (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:561:1879)
    at async LC.validateAndExecute (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:337:620)
    at async oo.run (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:351:1846)
    at async oo.runExit (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:351:2013)
    at async i (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:448:12377)
    at async r (/home/andrey/Code/cashflowio/.yarn/releases/yarn-3.1.1.cjs:448:10617)

On the other hand, adding the --openssl-legacy-provider flag adds more errors. Now I’ve reinstalled my latest node so at least I’m done to one error and broken hot reloading, and instead I’m up to 52 errors, broken everything and can’t work.

Adding the --openssl-legacy-provider worked for me.

Steps to resolve the issue using --openssl-legacy-provider :

  • update your start script in package.json to use react-scripts --openssl-legacy-provider start

It should look like this : "start": "react-scripts --openssl-legacy-provider start",

This works for me!

+1
Desarrollos-Web-Urquiza on Apr 28, 2023

I find this works to just use node 18… set NODE_OPTIONS=--openssl-legacy-provider

+1
d3x0r on Nov 13, 2022

Hi,

I am using CRA 5 and I am having the same error, Do you know when it will be fixed?

Thanks!

+1
RodrigoTomeES on Mar 6, 2022

While you wait for a new CRA version, you can run Node version 16 without uninstalling version 17 using nvm nvm install 16.13.0 nvm run 16.13.0 Have a look at creating a .nvmrc file in your projects root. https://github.com/nvm-sh/nvm#nvmrc I assume the issue is CRA using webpack-v4 and is resolved upgrading to v5 ( I haven’t actually validated this ) (#14532) #11563 #11562

workaround is not what I am looking for rn 😦

Haha, @rhythmshandlya You can try the Alpha release that supports webpack v5 and see if you get the same error. I’m sure the devs would appreciate the testing feedback.

npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app

#11278 #9994

+1
nicholasrobertson on Feb 1, 2022
Read more comments on GitHub
← create-react-app: Error when using new 'react-jsx' TypeScript transform
create-react-app: [eslint-config-react-app] Can't disable rule "@typescript-eslint/no-unused-vars" in config, outside of CRA →