Error when running build-storybook with Node 17

[NicolasBelliard]

Describe the bug
When I running the cmd line ̀yarn build-storybook -c .storybook -o build/storybook` with Node 17.
I received this error:

10% building 1/11 modules 10 active /home/belliard/dev/my-app/node_modules/@storybook/addon-links/dist/esm/preset/addDecorator.js-generated-other-entry.jsnode:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/belliard/dev/my-app/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/belliard/dev/my-app/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/belliard/dev/my-app/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/belliard/dev/my-app/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/belliard/dev/my-app/node_modules/@storybook/builder-webpack4/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/belliard/dev/my-app/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/belliard/dev/my-app/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at /home/belliard/dev/my-app/node_modules/loader-runner/lib/LoaderRunner.js:205:4
    at /home/belliard/dev/my-app/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:85:15
    at processTicksAndRejections (node:internal/process/task_queues:78:11) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.0.1

I create a CRA project in order to reproduce the bug, and I get the error.
An issue on webpack was opened (#14532) and a workaround was found using

export NODE_OPTIONS=--openssl-legacy-provider

To Reproduce

• Create a react project with CRA
• Run npx sb init
• Run yarn build-storybook -c .storybook -o build/storybook

System

Environment Info:

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 PRO 4650U with Radeon Graphics
  Binaries:
    Node: 17.0.1 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 95.0.4638.69
    Firefox: 93.0
  npmPackages:
    @storybook/addon-actions: ^6.3.12 => 6.3.12 
    @storybook/addon-essentials: ^6.3.12 => 6.3.12 
    @storybook/addon-links: ^6.3.12 => 6.3.12 
    @storybook/node-logger: ^6.3.12 => 6.3.12 
    @storybook/preset-create-react-app: ^3.2.0 => 3.2.0 
    @storybook/react: ^6.3.12 => 6.3.12 

[IanVS]

It looks like updating storybook's webpack5 builder to webpack v5.61.0 should fix this issue for that builder.
webpack/webpack#14532 (comment)

But, an update to webpack 4 isn't expected. webpack/webpack#14532 (comment)

[ndelangen]

If webpack 4 isn't patched, perhaps the other solutions listed in this article would resolve the issue for some users:

https://onlinessolution.blogspot.com/2021/11/error-error0308010cdigital-envelope.html

[Mnigos]

I got same error with svelte kit project

[jiwakreator]

I previously ran with nodejs 17 this problem appeared, after replacing it with nodejs 16 LTS there was no problem.

[rtrembecky]

Hi, I'm using webpack 5.65.0, node 17.4.0, and storybook 6.5.0-alpha.49. I'm encountering this issue. I was able to solve it locally by putting NODE_OPTIONS=--openssl-legacy-provider at the start of my storybook build/start commands, but this doesn't work on our CI - the node option is blocked because of security concerns. We will downgrade node to 16 for now, but I want to ask: What are the plans here? Will this be solved by the Storybook team in the future?

[rtrembecky]

Getting back 20 minutes later - I actually found a culprit. You were right this is fixed in the new webpack version, the problem was that the @storybook/builder-webpack5 package defines its own webpack: ^5.9.0 dependency, which in yarn.lock had an old resolution. So I:

• removed the whole "webpack@npm:^5.9.0": part of yarn.lock
• ran yarn to re-resolve dependencies

After this, it works.

However, this means the Storybook team should update the webpack dependency of @storybook/builder-webpack5 so other people don't run into this problem anymore.

[ghost]

More users may run into this issue as node.js 16's EOL is 7 months ahead of schedule.

When we put together Node.js 16 the hope was that we would be able to
include OpenSSL 3. Unfortunately, the timing of the releases did not allow
that to be possible, and we released Node.js 16 with OpenSSL 1.1.1. OpenSSL
1.1.1 is scheduled to be supported up until September 11th, 2023, which is
seven months before the planned End-of-Life date of Node.js 16 (April 2024).
https://nodejs.org/en/blog/announcements/nodejs16-eol/

I'm temporarily avoiding it by enabling the node environment variable in direnv.

export NODE_OPTIONS=--openssl-legacy-provider

[ndelangen]

@rtrembecky Do you mean this here:

storybook/lib/builder-webpack5/package.json

Line 76 in af1bbc2

"webpack": "^5.9.0",

What version should it be according to you to remove this problem

[rtrembecky]

What version should it be according to you to remove this problem

@ndelangen yes, I mean exactly that. As of webpack/webpack#14532 (comment), it is fixed in 5.61.0, so ^5.61.0 would do, but there's probably no reason not to go with the newest (^5.73.0).

[ndelangen]

Correct me if I'm wrong, but our current version range does allow users to install a version higher, and thus a user can totally end up installing 5.73.0 without any resolutions?

[rtrembecky]

I'd say so as well. So user is not blocked from working around the potential issue (as I mentioned in my previous post by deleting a yarn.lock line and rerunning yarn). But I'd also say Storybook should try to minimize the amount of potential issues for users and provide the package ranges to do so.

[ndelangen]

Right, I'll do a wide range of version bumps of dependencies in future/base branch soon, which will make it out in 7.0

[furkanmutlu-tomtom]

This fixed my problem: https://www.npmjs.com/package/@storybook/manager-webpack5

Removed @storybook/builder-webpack4 and @storybook/manager-webpack4 , node_modules and lock files. Then install v5. And follow the instuctions on above link.

[hlehmann]

This issue seems to remains for with builder-vite, as I understand manager-webpack4 is still used.

[IanVS]

@hlehmann that's true in 6.5, but in 7.0 webpack is not used in the vite builder at all. I'd suggest trying out the new alpha version if you're having issues here. npx sb@next upgrade --prerelease.

(Edited command)

[makivlach]

This solved the issue for me: webpack/webpack#14532 (comment)

[Atralbus]

Adding this configuration to .storybook/main.ts solved the issue for me;

module.exports = {
  // ...
  webpackFinal: async config => {
    config.output.hashFunction = 'xxhash64'

    // Return the altered config
    return config
  }
}

[kirandash]

Migrating to webpack 5 did the job for me.

Please note that this command is for fresh installation: npx sb init --builder webpack5
By default storybook installed webpack4 and it was causing the issue

[ubeydtalha]

Migrating to webpack 5 did the job for me.

Please note that this command is for fresh installation: npx sb init --builder webpack5 By default storybook installed webpack4 and it was causing the issue

It worked for me thanks ^^

[bitbw]

I previously ran with nodejs 17 this problem appeared, after replacing it with nodejs 16 LTS there was no problem.

Me too

[IanVS]

Node 17 is pretty far out-of-date now, and 16 is also deprecated. I'd recommend running with the latest node LTS if you're able to.

[bernaferrari]

I'm having this issue with Node 22.3

10% building 1/7 modules 6 active ...oferrari/Downloads/dnd-kit-master/node_modules/@storybook/addon-links/preview.js-generated-config-entry.jsnode:internal/crypto/hash:79
this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:79:19)
at Object.createHash (node:crypto:139:10)
at module.exports (/Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at /Users/bernardoferrari/Downloads/dnd-kit-master/node_modules/loader-runner/lib/LoaderRunner.js:205:4 {
opensslErrorStack: [
'error:03000086:digital envelope routines::initialization error',
'error:0308010C:digital envelope routines::unsupported'
],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}