storybook: Error when running build-storybook with Node 17

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

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

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

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 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)

@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@future upgrade --prerelease.

future did not work for me This one did: npx sb@next upgrade --prerelease

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?

I got same error with svelte kit project

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.

Thanks, I ran yarn dedupe instead of manually editing the lock file and this resolved my issue

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.

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
  }
}

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