builds failing with ERR_OSSL_EVP_UNSUPPORTED

[will-moore]

All builds are failing now, since upgrading from node 16 with:

$ npm run build

> [email protected] build
> webpack --progress --config webpack.prod.js

10% building 0/1 modules 1 active ...modules/babel-loader/lib/index.js!/Users/wmoore/Desktop/PARADE/omero-parade/src/js/index.jsnode:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

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 (/Users/wmoore/Desktop/PARADE/omero-parade/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/wmoore/Desktop/PARADE/omero-parade/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/wmoore/Desktop/PARADE/omero-parade/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/wmoore/Desktop/PARADE/omero-parade/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/wmoore/Desktop/PARADE/omero-parade/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/wmoore/Desktop/PARADE/omero-parade/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/wmoore/Desktop/PARADE/omero-parade/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/wmoore/Desktop/PARADE/omero-parade/node_modules/babel-loader/lib/index.js:41:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Lots of places e.g. https://stackoverflow.com/questions/69665222/node-js-17-0-1-gatsby-error-digital-envelope-routinesunsupported-err-os suggest using --openssl-legacy-provider in the npm scripts args, but this doesn't seem to help.

I have looked at starting a clean project using vite.js as a bundler instead of webpack, but I can't work out what the equivalent of the output.library is in vite that would build a library we can include with a <script> tag. In fact, this is only documented for webpack 3 (even though we are using webpack 4):
https://webpack-v3.jsx.app/configuration/output/#output-library

Also tried outpub.hashFunction (see https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported) with various values to no effect.

Tried npm audit fix --force too, but that didn't work.

It says at https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported/71334532#71334532 to use react-scripts 5.0.0 since it uses webpack 5.0.

We don't use react-scripts but I could try to upgrade webpack... https://webpack.js.org/migrate/5/

cc @jburel