Tutorial does not work due to outdated npm depenencies

[bluenote10]

Describe the Bug

The tutorial breaks in the npm run start step:

$ npm start

> [email protected] start
> webpack-dev-server

(node:20541) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www
node: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 (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:43:16)
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:79:9
    at /home/fabian/git/RustExperiments/GuiExperiments/wasm-tutorial/www/node_modules/graceful-fs/graceful-fs.js:78:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0

Steps to Reproduce

Follow the tutorial steps up to the serving locally, when the dev server is started for the first time.

If applicable, add a link to a test case (as a zip file or link to a repository we can clone).

Expected Behavior

The step should succeed.

Actual Behavior

See error above.

Additional Context

The reason is most likely that the dependencies in the package.json are of the web app template are extremely outdated. Trying to update them with npx npm-check -u suggest major version jumps for all dependencies:

But trying to update them fails with an internal dependency conflict that I have yet to understand...

[Unic-X]

I think there's a way to make it work, you can export this as an environment variable NODE_OPTIONS=--openssl-legacy-provider and then run npm run start or npm start it seemed to have worked for me.

[MariusDrulea]

@Unic-X how did you manage to find the solution? It worked for me as well.

[Unic-X]

@MariusDrulea, I also looked up somewhere i don't remember correctly, but i think this _Hash functions is the problem, and after looking for a bit i found out using --legacy version for openssl might fix it

[graydenshand]

This bug is in create-wasm-app rather than this tutorial.

See related issue on that repo: rustwasm/create-wasm-app#214