Unable to run microfrontends on Node 18

[cesine]

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)

[lfades]

The storybook step has issues in the microfrontends example, fortunately everything else works, the issue is how pnpm manages the dependencies of storybook, there's an open issue for that in the storybook repository.

[john093e]

running npx storybook@next upgrade --prerelease solved it for me :)