examples
examples copied to clipboard
vercel
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/[email protected]/node_modules/webpack/lib/util/createHash.js:135:53)
@acme/storybook:dev: at NormalModule._initBuildHash (examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:417:16)
@acme/storybook:dev: at handleParseError (examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:471:10)
@acme/storybook:dev: at examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:503:5
@acme/storybook:dev: at examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/webpack/lib/NormalModule.js:358:12
@acme/storybook:dev: at examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:373:3
@acme/storybook:dev: at iterateNormalLoaders (examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
@acme/storybook:dev: at Array.<anonymous> (examples/solutions/microfrontends/node_modules/.pnpm/[email protected]/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:
- Use Node 16 which doesnt have the ssl issues
nvm use 16
- Workaround it https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported
NODE_OPTIONS=--openssl-legacy-provider
- 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)
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.
