Unable to run microfrontends on Node 18

Steps to reproduce

Use the latest Node 18

$ nvm use --lts

Run pnpm dev

$ pnpm install
$ pnpm dev

Observe SSL errors

@acme/storybook:dev: attention => Storybook now collects completely anonymous telemetry regarding usage.
@acme/storybook:dev: This information is used to shape Storybook's roadmap and prioritize features.
@acme/storybook:dev: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
@acme/storybook:dev: https://storybook.js.org/telemetry
@acme/storybook:dev: 
@acme/storybook:dev: 
@acme/storybook:dev: info => Ignoring cached manager due to change in manager config
@acme/storybook:dev: ℹ ｢wdm｣: wait until bundle finished: 
@acme/storybook:dev: (node:39035) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
@acme/storybook:dev: (Use `node --trace-warnings ...` to show where the warning was created)
@acme/storybook:dev: node:internal/crypto/hash:71
@acme/storybook:dev:   this[kHandle] = new _Hash(algorithm, xofLen);
@acme/storybook:dev:                   ^
@acme/storybook:dev: 
@acme/storybook:dev: Error: error:0308010C:digital envelope routines::unsupported
@acme/storybook:dev:     at new Hash (node:internal/crypto/hash:71:19)
@acme/storybook:dev:     at Object.createHash (node:crypto:133:10)
@acme/storybook:dev:     at module.exports (examples/solutions/microfrontends/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/util/createHash.js:135:53)
@acme/storybook:dev:     at NormalModule._initBuildHash (examples/solutions/microfrontends/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/NormalModule.js:417:16)
@acme/storybook:dev:     at handleParseError (examples/solutions/microfrontends/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/NormalModule.js:471:10)
@acme/storybook:dev:     at examples/solutions/microfrontends/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/NormalModule.js:503:5
@acme/storybook:dev:     at examples/solutions/microfrontends/node_modules/.pnpm/webpack@4.46.0/node_modules/webpack/lib/NormalModule.js:358:12
@acme/storybook:dev:     at examples/solutions/microfrontends/node_modules/.pnpm/loader-runner@2.4.0/node_modules/loader-runner/lib/LoaderRunner.js:373:3
@acme/storybook:dev:     at iterateNormalLoaders (examples/solutions/microfrontends/node_modules/.pnpm/loader-runner@2.4.0/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
@acme/storybook:dev:     at Array.<anonymous> (examples/solutions/microfrontends/node_modules/.pnpm/loader-runner@2.4.0/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
@acme/storybook:dev:   opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
@acme/storybook:dev:   library: 'digital envelope routines',
@acme/storybook:dev:   reason: 'unsupported',
@acme/storybook:dev:   code: 'ERR_OSSL_EVP_UNSUPPORTED'
@acme/storybook:dev: }
@acme/storybook:dev: 
@acme/storybook:dev: Node.js v18.12.1
@acme/storybook:dev:  ELIFECYCLE  Command failed with exit code 1.
@acme/storybook:dev: ERROR: command finished with error: command (examples/solutions/microfrontends/packages/acme-storybook) pnpm run dev exited (1)

command (examples/solutions/microfrontends/packages/acme-storybook) pnpm run dev exited (1)

 Tasks:    0 successful, 1 total
Cached:    0 cached, 1 total
  Time:    17.849s 

 ERROR  run failed: command  exited (1)
 ELIFECYCLE  Command failed with exit code 1.

Workarounds

There are a couple of options to workarounds this:

1. Use Node 16 which doesnt have the ssl issues

nvm use 16

2. Workaround it https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

NODE_OPTIONS=--openssl-legacy-provider

3. Resolve to webpack 5

+++ b/package.json

+  "resolutions" : {
+    "webpack": "^5.75.0"
   }

Although this runs into another issue that might be due to vite:

@acme/storybook:dev: info => Loading presets
@acme/storybook:dev: 
@acme/storybook:dev: attention => Storybook now collects completely anonymous telemetry regarding usage.
@acme/storybook:dev: This information is used to shape Storybook's roadmap and prioritize features.
@acme/storybook:dev: You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
@acme/storybook:dev: https://storybook.js.org/telemetry
@acme/storybook:dev: 
@acme/storybook:dev: (node:43158) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
@acme/storybook:dev: (Use `node --trace-warnings ...` to show where the warning was created)
@acme/storybook:dev: 
@acme/storybook:dev: info => Ignoring cached manager due to change in manager config
@acme/storybook:dev: unable to close vite server
...
@acme/storybook:dev: error Command failed with exit code 1.
@acme/storybook:dev: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
@acme/storybook:dev: ERROR: command finished with error: command (examples/packages/acme-storybook) yarn run dev exited (1)
command (examples/packages/acme-storybook) yarn run dev exited (1)

Start in examples/solutions/microfrontends and inspect package.json, especially the webpack and Storybook-related dependencies shown in the report. Run pnpm install and pnpm dev with Node 18, then verify that the microfrontend development setup starts without ERR_OSSL_EVP_UNSUPPORTED or the reported Vite shutdown failure.