Update Webpack to use more secure hashing routines

[PeterHaughie]

When using node 18 the wpstart and wpbuild scripts bail with errors:

npm run wpstart

> [email protected] wpstart
> wptheme-scripts wpstart

Browser Refresh Server ready.
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/@devloco/react-scripts-wptheme/scripts/wpstart.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/peterhaughie/Projects/tm2022-2/wp-content/themes/tm-2023/react-src/node_modules/@devloco/react-scripts-wptheme/node_modules/babel-loader/lib/index.js:55:103
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

This is due to the webpack using the SHA512 hash which has been replaced in Webpack5 with xxhash64. The solutions are either to update the Webpack version to 5 and methodically go through all of the webpack build scripts to fix the breaking API changes or to try and enforce a different hashing algorithm in Webpack4 with something along the lines of:

module.exports = {
  //...
  experiments: {
    futureDefaults: true,
  },
};

module.exports = {
  //...
  output: {
    hashFunction: require('metrohash').MetroHash64,
  },
};

https://webpack.js.org/configuration/output/#outputhashfunction

https://webpack.js.org/configuration/experiments/#experimentsfuturedefaults

[walterwakefield]

Hi!

I finally finally got this working.

Step 1) Run commans:

On Unix-like (Linux, macOS, Git bash, etc.):
export NODE_OPTIONS=--openssl-legacy-provider

On Windows command prompt:
set NODE_OPTIONS=--openssl-legacy-provider

On PowerShell:
$env:NODE_OPTIONS = "--openssl-legacy-provider"

Step 2) Delete package.lock.json

Step 3) In package.json change "scripts" section to:

"scripts": {
"crabuild": "react-scripts --openssl-legacy-provider build",
"craeject": "react-scripts --openssl-legacy-provider eject",
"crastart": "react-scripts --openssl-legacy-provider start",
"cratest": "react-scripts --openssl-legacy-provider test",
"build": "wptheme-scripts --openssl-legacy-provider build",
"start": "wptheme-scripts --openssl-legacy-providerstart",
"wpbuild": "wptheme-scripts --openssl-legacy-provider wpbuild",
"wpstart": "wptheme-scripts --openssl-legacy-provider wpstart"
},
Step 4) If the second time, we get a 8090 port in use error, find out which port by using command:
sudo lsof -i :8090

then kill the process by using PID.

sudo kill -9

Then restart by using command sudo npm run wpstart