Doesn't work nicely with Node 18 (Or even 17)

[Dorious]

Describe the bug

Starting from Node 17 the Open SSL changed, and now we have to run in legacy mode, which probably isn't that great:

ERROR in ./src/style/img/bt_logo_white.svg
Module build failed (from ../node_modules/file-loader/dist/cjs.js):
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at getHashDigest (/Users/dorious/BT/athena-ui/node_modules/loader-utils/lib/getHashDigest.js:46:34)
    at /Users/dorious/BT/athena-ui/node_modules/loader-utils/lib/interpolateName.js:113:11
    at String.replace (<anonymous>)
    at interpolateName (/Users/dorious/BT/athena-ui/node_modules/loader-utils/lib/interpolateName.js:110:8)
    at Object.loader (/Users/dorious/BT/athena-ui/node_modules/file-loader/dist/index.js:29:48)

https://stackoverflow.com/a/73465262
Guys says we should change hashFunction in webpack output config, which obviously we can't do.

[brownieboy]

You can do it if you use rewiring tool such as craco.

That's not ideal though. This should really be fixed in the core of CRA.

[Dorious]

You can do it if you use rewiring tool such as craco.
Yeah, we don't want to use craco. Fortunately it started to work with react-scripts 5.
For now we just use legacy openssl.

[gauravshah27]

@Dorious The reason you are seeing this issue in Node.js 17 or higher is because Node.js 17 released with OpenSSL 3.0 support which deprecates MD4 hashing algorithm and does not enable it by default. This was supported upto Node.js 16 which was released with OpenSSL 1.1.1 . This is used by all versions of webpack 4 and earlier versions of webpack 5 upto 5.61.0.

You should double-check the version of webpack that is being pulled in by your react-scripts package. If you are using react-scripts 5.0.1 - you should not have any issues because that currently pulls in 5.61.0+ of webpack . That is the version of webpack that updated from OpenSSL based MD4 algorithm to a WebAssembly based MD4 implementation.

[Dorious]

Well I have 5.73.0 and the problem is there. So that's not true, or something else happens.

[hbroer]

same for me.

[brownieboy]

I've been looking at a solution/workaround suggested on this thread #11756

With this one, you install the missing polyfills as devDependencies like so:

"devDependencies": {
    "buffer": "npm:buffer@^6.0.3",
    "crypto": "npm:crypto-browserify@^3.12.0",
    "http": "npm:stream-http@^3.2.0",
    "https": "npm:https-browserify@^1.0.0",
    "stream": "npm:stream-browserify@^3.0.0",
    "util": "npm:util@^0.12.5",
    "zlib": "npm:browserify-zlib@^0.2.0"
}

It seems to work in my testing so far, at least it does so locally. And crucially, it does not involve changing the Webpack config, so doesn't require Craco or anything like it.

[agelico]

brownieboy solution didn't work for me.
A year passed — no solution ☹️

Why does it even use file-loader for svgs 🤔