"npm run" fails with ERR_OSSL_EVP_UNSUPPORTED - node.js

Question

I have an existing project which I lately installed on a new equipment.
It is a Laravel + vue project.
When I run npm run watch I get the following error:
> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js "--watch"
10% building 1/1 modules 0 active
webpack is watching the files…
10% building 1/3 modules 2 active ...er/index.js??ref--5-4!/var/www/node_modules/sass-loader/lib/loader.js??ref--5-5!/var/www/resources/sass/app.scssError: 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 (/var/www/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/var/www/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/var/www/node_modules/webpack/lib/NormalModule.js:471:10)
at /var/www/node_modules/webpack/lib/NormalModule.js:503:5
at /var/www/node_modules/webpack/lib/NormalModule.js:358:12
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at runSyncOrAsync (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at iterateNormalLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:186:6
at runSyncOrAsync (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:178:3
at loadLoader (/var/www/node_modules/loader-runner/lib/loadLoader.js:47:3)
at iteratePitchingLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at iteratePitchingLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:165:10)
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:188:6
at runSyncOrAsync (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:124:12)
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:178:3
at loadLoader (/var/www/node_modules/loader-runner/lib/loadLoader.js:47:3)
at iteratePitchingLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:169:2)
at runLoaders (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:365:2)
at NormalModule.doBuild (/var/www/node_modules/webpack/lib/NormalModule.js:295:3)
at NormalModule.build (/var/www/node_modules/webpack/lib/NormalModule.js:446:15)
at Compilation.buildModule (/var/www/node_modules/webpack/lib/Compilation.js:739:10)
at /var/www/node_modules/webpack/lib/Compilation.js:981:14
at /var/www/node_modules/webpack/lib/NormalModuleFactory.js:409:6
at /var/www/node_modules/webpack/lib/NormalModuleFactory.js:155:13
at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/var/www/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at /var/www/node_modules/webpack/lib/NormalModuleFactory.js:138:29
at /var/www/node_modules/webpack/lib/NormalModuleFactory.js:346:9
at processTicksAndRejections (node:internal/process/task_queues:78:11)
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
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 (/var/www/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/var/www/node_modules/webpack/lib/NormalModule.js:417:16)
at /var/www/node_modules/webpack/lib/NormalModule.js:452:10
at /var/www/node_modules/webpack/lib/NormalModule.js:323:13
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:367:11
at /var/www/node_modules/loader-runner/lib/LoaderRunner.js:233:18
at context.callback (/var/www/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /var/www/node_modules/babel-loader/lib/index.js:55:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
I am using Node.js v17.3.0, npm version 8.3.0, and webpack 4.41.4.

Answer 1

Node.js version 17 has switched to using OpenSSL 3.0. They advise:
While OpenSSL 3.0 APIs should be mostly compatible with those provided by OpenSSL 1.1.1, we do anticipate some ecosystem impact due to tightened restrictions on the allowed algorithms and key sizes.
If you hit an ERR_OSSL_EVP_UNSUPPORTED error in your application with Node.js 17, it’s likely that your application or a module you’re using is attempting to use an algorithm or key size which is no longer allowed by default with OpenSSL 3.0. A command-line option, --openssl-legacy-provider, has been added to revert to the legacy provider as a temporary workaround for these tightened restrictions.
This has been resolved in Webpack versions 5 and 6, but there are no plans to backport this fix to version 4.
To pass the --openssl-legacy-provider flag to Node, you can prefix your command with the environment variable assignment:
NODE_OPTIONS=--openssl-legacy-provider npm run watch

Answer 2

What worked for me (on Ubuntu 22.04) was adding this to the package.json file:
{
"scripts": {
"start": "react-scripts --openssl-legacy-provider start"
}
}
I found the complete answer in this article by Borislav Hadzhiev: Fix - error:0308010C:digital envelope routines::unsupported