[Bug]: envelope routines::unsupported

[hazem-alabiad]

Describe the bug

1. start a node project
2. install react and storybook up-to-date versions
3. run start-storybook scripts
4. the scripts fail with error

To Reproduce

storybook fails to run on Node v18.x

logs

➜ y storybook
yarn run v1.22.19
$ start-storybook -p 6006
info @storybook/react v6.5.16
info 
info => Loading presets
ℹ ｢wdm｣: wait until bundle finished: 
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 (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/Users/hazemalabiad/getir/getirjobs-corporate-web/node_modules/loader-runner/lib/LoaderRunner.js:205:4) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.15.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[ppseafield]

Have you tried running it with NODE_OPTIONS="--openssl-legacy-provider" ?

[shilman]

Please try upgrading to the latest prerelease.

Migration guide: https://storybook.js.org/migration-guides/7.0

[hazem-alabiad]

I tried

Have you tried running it with NODE_OPTIONS="--openssl-legacy-provider" ?

I tried this solution, it works with storybook ✅
But, when I added the chromatic scripts, it fails telling me that I cannot pass this node option 👎🏻

[hazem-alabiad]

Please try upgrading to the latest prerelease.

Migration guide: https://storybook.js.org/migration-guides/7.0

It seems that generally there are two solutions:

1. downgrade node to v16.x
2. upgrade storybook to pre-release version

As 2 seems a bit risky to have non-stable version in production so, seems option 1 the best for now.
Any other suggestions, comments?

[sookmax]

@shilman Hello there, I think this issue still persists even with storybook v7.

I encountered this issue while I was following one of the tutorials Design Systems for Developers.

I have a reproducible repo here: sookmax/learnstorybook-design-system.

Repo dependencies information

• "storybook": "^7.0.11"
• "react-scripts": "^5.0.1"
• node v18.12.1
• yarn 1.22.19

Checking out the repo and run the following commands will produce the error at the end of the build process:

yarn install
yarn storybook

P.S. The suggested workaround using NODE_OPTIONS="--openssl-legacy-provider" still works by the way.

[marko-hologram]

TL;DR Updating Webpack and Storybook to latest version fixed this for me.

I had this happen with Storybook v6.3.8 and Node v18.16.1. I tried updating Webpack to latest version, but that didn't work. Previously I was on v5.54.0 and upgrading to latest v5.88.1 didn't help.

I updated to Storybook v7.0.27 without the Webpack upgrade and that also failed. Updating both Storybook and Webpack to latest version resolved this issue for me.

Storybook 6.3.8 + Webpack 5.54.0 -- Didn't work
Storybook 6.3.8 + Webpack 5.88.1 -- Didn't work

Storybook 7.0.27 + Webpack 5.54.0 -- Didn't work
Storybook 7.0.27 + Webpack 5.88.1 -- Worked

[Vadorequest]

Another answer: https://stackoverflow.com/a/73027407/2391795